Nested borders won't stay inside the main when input:checkedDrop down menu to hide on click eventVertically centering a div inside another divget CSS inset box-shadow to appear on top of inner backgroundsPlacing border inside of div and not on its edgeDIV's isn't flowing normallyMultiple FLOAT DIV and BORDERAligning css position in div not workingCentering a div with a full width/height borderHTML element show wrong area when there's no “border” attributeHow can i fit 4 boxes vertically in a div with diffrent height?

Multi tool use
Multi tool use

What's the biggest organic molecule that could have a smell?

Are there any instances of members of different Hogwarts houses coupling up and marrying each other?

Writing a worded mathematical expression

If you have multiple situational racial save bonuses and are in a situation where they all apply do they stack?

Can a magnet rip protons from a nucleus?

Why was "leaping into the river" a valid trial outcome to prove one's innocence?

Seized engine due to being run without oil

How can I protect myself in case of a human attack like the murders of the hikers Jespersen and Ueland in Morocco?

Do all humans have an identical nucleotide sequence for certain proteins, e.g haemoglobin?

Double it your way

Can I toggle Do Not Disturb on/off on my Mac as easily as I can on my iPhone?

Georgian capital letter “Ⴒ” (“tar”) in pdfLaTeX

Why did they ever make smaller than full-frame sensors?

Exact Brexit date and consequences

What does "synoptic" mean in avionics?

Can I cast Sunbeam if both my hands are busy?

Why is the T-1000 humanoid?

Tall red piece with coffee cup, phone and gas picture?

How to find a missing person abroad

How do I politely hint customers to leave my store, without pretending to need leave store myself?

Why should I always enable compiler warnings?

Should I leave the first authourship of our paper to the student who did the project whereas I solved it?

A Little Riddle

Are programming languages necessary/useful for operations research practitioner?



Nested


borders won't stay inside the main
when input:checked

Drop down menu to hide on click eventVertically centering a div inside another divget CSS inset box-shadow to appear on top of inner backgroundsPlacing border inside of div and not on its edgeDIV's isn't flowing normallyMultiple FLOAT DIV and BORDERAligning css position in div not workingCentering a div with a full width/height borderHTML element show wrong area when there's no “border” attributeHow can i fit 4 boxes vertically in a div with diffrent height?






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








0















  • I have a main position: relative.

  • Nested (input check box) position: absolute.


  • When the checkbox is checked the inside div color will scale to 500px. The problem is the color will spill out its main .


  • Here is the screen shot of the checkbox border spilling out of the main square . https://pasteboard.co/I7uA6am.jpg


  • What I am trying to do is When we click the circle checkbox at the bottom right. The background color of that checkbox will fill the entire main which is a rectangle of 300px by 400px. In this case the checkbox border takes almost the entire screen as it is set to 500px.


I have tried
- Z-index
- Setting the width of the box-shadow transform to 100% width of the main
- overflow: hidden.
- position: absolute;



None of those solutions worked.



// HTML CODE //



<div class="card">
<input type="checkbox" name="">
<div class="toggle">+</div>
<div class="imgBox"> </div>
<div class="content"> </div>
<div class="details">

<h2>A quick check on CSS</h2>
<p> Just doing a quick test on CSS</p>


</div>
</div>


// CSS CODE //



card 
position: relative;
width: 300px;
height: 400px;
background: #262626;


input,
.toggle
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
border: none;
outline: none;
z-index: 10;


input
opacity: 0;


.toggle
pointer-events: none;
border-radius: 50%;
background: #fff;
transition: 0.5s;
text-align: center;
font-size: 36px;
line-height: 40px;
box-shadow: 0 0 0 0px #9c27b0;
overflow: hidden;



/* WHEN INPUT IS SET TO CHECK, TOGGLE APPEARS */



 input:checked ~ .toggle 

box-shadow: 0 0 0 500px #9c27b0;

transform: rotate(500);










share|improve this question


























  • Your question imo is very unclear. Please explain in detail what your desired result should look like

    – Mihai T
    Mar 28 at 9:10











  • Hey there. Does this help ??? pasteboard.co/I7uA6am.jpg Hope it clears it up, sorry if my question was confusing, will try to edit it in the mean time.

    – Thomas_da_tank
    Mar 28 at 9:50


















0















  • I have a main position: relative.

  • Nested (input check box) position: absolute.


  • When the checkbox is checked the inside div color will scale to 500px. The problem is the color will spill out its main .


  • Here is the screen shot of the checkbox border spilling out of the main square . https://pasteboard.co/I7uA6am.jpg


  • What I am trying to do is When we click the circle checkbox at the bottom right. The background color of that checkbox will fill the entire main which is a rectangle of 300px by 400px. In this case the checkbox border takes almost the entire screen as it is set to 500px.


I have tried
- Z-index
- Setting the width of the box-shadow transform to 100% width of the main
- overflow: hidden.
- position: absolute;



None of those solutions worked.



// HTML CODE //



<div class="card">
<input type="checkbox" name="">
<div class="toggle">+</div>
<div class="imgBox"> </div>
<div class="content"> </div>
<div class="details">

<h2>A quick check on CSS</h2>
<p> Just doing a quick test on CSS</p>


</div>
</div>


// CSS CODE //



card 
position: relative;
width: 300px;
height: 400px;
background: #262626;


input,
.toggle
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
border: none;
outline: none;
z-index: 10;


input
opacity: 0;


.toggle
pointer-events: none;
border-radius: 50%;
background: #fff;
transition: 0.5s;
text-align: center;
font-size: 36px;
line-height: 40px;
box-shadow: 0 0 0 0px #9c27b0;
overflow: hidden;



/* WHEN INPUT IS SET TO CHECK, TOGGLE APPEARS */



 input:checked ~ .toggle 

box-shadow: 0 0 0 500px #9c27b0;

transform: rotate(500);










share|improve this question


























  • Your question imo is very unclear. Please explain in detail what your desired result should look like

    – Mihai T
    Mar 28 at 9:10











  • Hey there. Does this help ??? pasteboard.co/I7uA6am.jpg Hope it clears it up, sorry if my question was confusing, will try to edit it in the mean time.

    – Thomas_da_tank
    Mar 28 at 9:50














0












0








0








  • I have a main position: relative.

  • Nested (input check box) position: absolute.


  • When the checkbox is checked the inside div color will scale to 500px. The problem is the color will spill out its main .


  • Here is the screen shot of the checkbox border spilling out of the main square . https://pasteboard.co/I7uA6am.jpg


  • What I am trying to do is When we click the circle checkbox at the bottom right. The background color of that checkbox will fill the entire main which is a rectangle of 300px by 400px. In this case the checkbox border takes almost the entire screen as it is set to 500px.


I have tried
- Z-index
- Setting the width of the box-shadow transform to 100% width of the main
- overflow: hidden.
- position: absolute;



None of those solutions worked.



// HTML CODE //



<div class="card">
<input type="checkbox" name="">
<div class="toggle">+</div>
<div class="imgBox"> </div>
<div class="content"> </div>
<div class="details">

<h2>A quick check on CSS</h2>
<p> Just doing a quick test on CSS</p>


</div>
</div>


// CSS CODE //



card 
position: relative;
width: 300px;
height: 400px;
background: #262626;


input,
.toggle
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
border: none;
outline: none;
z-index: 10;


input
opacity: 0;


.toggle
pointer-events: none;
border-radius: 50%;
background: #fff;
transition: 0.5s;
text-align: center;
font-size: 36px;
line-height: 40px;
box-shadow: 0 0 0 0px #9c27b0;
overflow: hidden;



/* WHEN INPUT IS SET TO CHECK, TOGGLE APPEARS */



 input:checked ~ .toggle 

box-shadow: 0 0 0 500px #9c27b0;

transform: rotate(500);










share|improve this question
















  • I have a main position: relative.

  • Nested (input check box) position: absolute.


  • When the checkbox is checked the inside div color will scale to 500px. The problem is the color will spill out its main .


  • Here is the screen shot of the checkbox border spilling out of the main square . https://pasteboard.co/I7uA6am.jpg


  • What I am trying to do is When we click the circle checkbox at the bottom right. The background color of that checkbox will fill the entire main which is a rectangle of 300px by 400px. In this case the checkbox border takes almost the entire screen as it is set to 500px.


I have tried
- Z-index
- Setting the width of the box-shadow transform to 100% width of the main
- overflow: hidden.
- position: absolute;



None of those solutions worked.



// HTML CODE //



<div class="card">
<input type="checkbox" name="">
<div class="toggle">+</div>
<div class="imgBox"> </div>
<div class="content"> </div>
<div class="details">

<h2>A quick check on CSS</h2>
<p> Just doing a quick test on CSS</p>


</div>
</div>


// CSS CODE //



card 
position: relative;
width: 300px;
height: 400px;
background: #262626;


input,
.toggle
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
border: none;
outline: none;
z-index: 10;


input
opacity: 0;


.toggle
pointer-events: none;
border-radius: 50%;
background: #fff;
transition: 0.5s;
text-align: center;
font-size: 36px;
line-height: 40px;
box-shadow: 0 0 0 0px #9c27b0;
overflow: hidden;



/* WHEN INPUT IS SET TO CHECK, TOGGLE APPEARS */



 input:checked ~ .toggle 

box-shadow: 0 0 0 500px #9c27b0;

transform: rotate(500);







css3






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 28 at 9:57







Thomas_da_tank

















asked Mar 28 at 9:02









Thomas_da_tankThomas_da_tank

316 bronze badges




316 bronze badges















  • Your question imo is very unclear. Please explain in detail what your desired result should look like

    – Mihai T
    Mar 28 at 9:10











  • Hey there. Does this help ??? pasteboard.co/I7uA6am.jpg Hope it clears it up, sorry if my question was confusing, will try to edit it in the mean time.

    – Thomas_da_tank
    Mar 28 at 9:50


















  • Your question imo is very unclear. Please explain in detail what your desired result should look like

    – Mihai T
    Mar 28 at 9:10











  • Hey there. Does this help ??? pasteboard.co/I7uA6am.jpg Hope it clears it up, sorry if my question was confusing, will try to edit it in the mean time.

    – Thomas_da_tank
    Mar 28 at 9:50

















Your question imo is very unclear. Please explain in detail what your desired result should look like

– Mihai T
Mar 28 at 9:10





Your question imo is very unclear. Please explain in detail what your desired result should look like

– Mihai T
Mar 28 at 9:10













Hey there. Does this help ??? pasteboard.co/I7uA6am.jpg Hope it clears it up, sorry if my question was confusing, will try to edit it in the mean time.

– Thomas_da_tank
Mar 28 at 9:50






Hey there. Does this help ??? pasteboard.co/I7uA6am.jpg Hope it clears it up, sorry if my question was confusing, will try to edit it in the mean time.

– Thomas_da_tank
Mar 28 at 9:50













2 Answers
2






active

oldest

votes


















0
















As i understand you would need overflow:hidden on the .card. please let me know if this is what you were looking for






.card 
position: relative;
width: 300px;
height: 400px;
background: #262626;
overflow: hidden;


input,
.toggle
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
border: none;
outline: none;
z-index: 10;


input
opacity: 0;


.toggle
pointer-events: none;
border-radius: 50%;
background: #fff;
transition: 0.5s;
text-align: center;
font-size: 36px;
line-height: 40px;
box-shadow: 0 0 0 0px #9c27b0;
overflow: hidden;


input:checked~.toggle
box-shadow: 0 0 0 300px #9c27b0;
transform: rotate(500);

<div class="card">
<input type="checkbox" name="">
<div class="toggle">+</div>
<div class="imgBox"> </div>
<div class="content"> </div>
<div class="details">

<h2>A quick check on CSS</h2>
<p> Just doing a quick test on CSS</p>


</div>
</div>








share|improve this answer
































    0
















    is this how you want it?






    card 
    position: relative;
    width: 300px;
    height: 400px;
    background: #262626;


    input,
    .toggle
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    border: none;
    outline: none;
    z-index: 10;


    input
    opacity: 0;


    .toggle
    pointer-events: none;
    border-radius: 50%;
    background: #fff;
    transition: 0.5s;
    text-align: center;
    font-size: 36px;
    line-height: 40px;
    box-shadow: 0 0 0 0px #9c27b0;
    overflow: hidden;


    input:checked~.toggle
    box-shadow: 0 0 0 300px #9c27b0;
    transform: rotate(500deg);
    background-color: #9c27b0;

    <div class="card">
    <input type="checkbox" name="">
    <div class="toggle">+</div>
    <div class="imgBox"> </div>
    <div class="content"> </div>
    <div class="details">

    <h2>A quick check on CSS</h2>
    <p> Just doing a quick test on CSS</p>


    </div>
    </div>








    share|improve this answer

























    • Hey I uploaded a new screenshot explaining in more details. Hope it helps and thanks for your time. pasteboard.co/I7uA6am.jpg

      – Thomas_da_tank
      Mar 28 at 9:53













    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );














    draft saved

    draft discarded
















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55393633%2fnested-div-borders-wont-stay-inside-the-main-div-when-inputchecked%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0
















    As i understand you would need overflow:hidden on the .card. please let me know if this is what you were looking for






    .card 
    position: relative;
    width: 300px;
    height: 400px;
    background: #262626;
    overflow: hidden;


    input,
    .toggle
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    border: none;
    outline: none;
    z-index: 10;


    input
    opacity: 0;


    .toggle
    pointer-events: none;
    border-radius: 50%;
    background: #fff;
    transition: 0.5s;
    text-align: center;
    font-size: 36px;
    line-height: 40px;
    box-shadow: 0 0 0 0px #9c27b0;
    overflow: hidden;


    input:checked~.toggle
    box-shadow: 0 0 0 300px #9c27b0;
    transform: rotate(500);

    <div class="card">
    <input type="checkbox" name="">
    <div class="toggle">+</div>
    <div class="imgBox"> </div>
    <div class="content"> </div>
    <div class="details">

    <h2>A quick check on CSS</h2>
    <p> Just doing a quick test on CSS</p>


    </div>
    </div>








    share|improve this answer





























      0
















      As i understand you would need overflow:hidden on the .card. please let me know if this is what you were looking for






      .card 
      position: relative;
      width: 300px;
      height: 400px;
      background: #262626;
      overflow: hidden;


      input,
      .toggle
      position: absolute;
      width: 50px;
      height: 50px;
      bottom: 20px;
      right: 20px;
      border: none;
      outline: none;
      z-index: 10;


      input
      opacity: 0;


      .toggle
      pointer-events: none;
      border-radius: 50%;
      background: #fff;
      transition: 0.5s;
      text-align: center;
      font-size: 36px;
      line-height: 40px;
      box-shadow: 0 0 0 0px #9c27b0;
      overflow: hidden;


      input:checked~.toggle
      box-shadow: 0 0 0 300px #9c27b0;
      transform: rotate(500);

      <div class="card">
      <input type="checkbox" name="">
      <div class="toggle">+</div>
      <div class="imgBox"> </div>
      <div class="content"> </div>
      <div class="details">

      <h2>A quick check on CSS</h2>
      <p> Just doing a quick test on CSS</p>


      </div>
      </div>








      share|improve this answer



























        0














        0










        0









        As i understand you would need overflow:hidden on the .card. please let me know if this is what you were looking for






        .card 
        position: relative;
        width: 300px;
        height: 400px;
        background: #262626;
        overflow: hidden;


        input,
        .toggle
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        border: none;
        outline: none;
        z-index: 10;


        input
        opacity: 0;


        .toggle
        pointer-events: none;
        border-radius: 50%;
        background: #fff;
        transition: 0.5s;
        text-align: center;
        font-size: 36px;
        line-height: 40px;
        box-shadow: 0 0 0 0px #9c27b0;
        overflow: hidden;


        input:checked~.toggle
        box-shadow: 0 0 0 300px #9c27b0;
        transform: rotate(500);

        <div class="card">
        <input type="checkbox" name="">
        <div class="toggle">+</div>
        <div class="imgBox"> </div>
        <div class="content"> </div>
        <div class="details">

        <h2>A quick check on CSS</h2>
        <p> Just doing a quick test on CSS</p>


        </div>
        </div>








        share|improve this answer













        As i understand you would need overflow:hidden on the .card. please let me know if this is what you were looking for






        .card 
        position: relative;
        width: 300px;
        height: 400px;
        background: #262626;
        overflow: hidden;


        input,
        .toggle
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        border: none;
        outline: none;
        z-index: 10;


        input
        opacity: 0;


        .toggle
        pointer-events: none;
        border-radius: 50%;
        background: #fff;
        transition: 0.5s;
        text-align: center;
        font-size: 36px;
        line-height: 40px;
        box-shadow: 0 0 0 0px #9c27b0;
        overflow: hidden;


        input:checked~.toggle
        box-shadow: 0 0 0 300px #9c27b0;
        transform: rotate(500);

        <div class="card">
        <input type="checkbox" name="">
        <div class="toggle">+</div>
        <div class="imgBox"> </div>
        <div class="content"> </div>
        <div class="details">

        <h2>A quick check on CSS</h2>
        <p> Just doing a quick test on CSS</p>


        </div>
        </div>








        .card 
        position: relative;
        width: 300px;
        height: 400px;
        background: #262626;
        overflow: hidden;


        input,
        .toggle
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        border: none;
        outline: none;
        z-index: 10;


        input
        opacity: 0;


        .toggle
        pointer-events: none;
        border-radius: 50%;
        background: #fff;
        transition: 0.5s;
        text-align: center;
        font-size: 36px;
        line-height: 40px;
        box-shadow: 0 0 0 0px #9c27b0;
        overflow: hidden;


        input:checked~.toggle
        box-shadow: 0 0 0 300px #9c27b0;
        transform: rotate(500);

        <div class="card">
        <input type="checkbox" name="">
        <div class="toggle">+</div>
        <div class="imgBox"> </div>
        <div class="content"> </div>
        <div class="details">

        <h2>A quick check on CSS</h2>
        <p> Just doing a quick test on CSS</p>


        </div>
        </div>





        .card 
        position: relative;
        width: 300px;
        height: 400px;
        background: #262626;
        overflow: hidden;


        input,
        .toggle
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        border: none;
        outline: none;
        z-index: 10;


        input
        opacity: 0;


        .toggle
        pointer-events: none;
        border-radius: 50%;
        background: #fff;
        transition: 0.5s;
        text-align: center;
        font-size: 36px;
        line-height: 40px;
        box-shadow: 0 0 0 0px #9c27b0;
        overflow: hidden;


        input:checked~.toggle
        box-shadow: 0 0 0 300px #9c27b0;
        transform: rotate(500);

        <div class="card">
        <input type="checkbox" name="">
        <div class="toggle">+</div>
        <div class="imgBox"> </div>
        <div class="content"> </div>
        <div class="details">

        <h2>A quick check on CSS</h2>
        <p> Just doing a quick test on CSS</p>


        </div>
        </div>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Mar 28 at 9:55









        Mihai TMihai T

        12.3k1 gold badge10 silver badges24 bronze badges




        12.3k1 gold badge10 silver badges24 bronze badges


























            0
















            is this how you want it?






            card 
            position: relative;
            width: 300px;
            height: 400px;
            background: #262626;


            input,
            .toggle
            position: absolute;
            width: 50px;
            height: 50px;
            bottom: 20px;
            right: 20px;
            border: none;
            outline: none;
            z-index: 10;


            input
            opacity: 0;


            .toggle
            pointer-events: none;
            border-radius: 50%;
            background: #fff;
            transition: 0.5s;
            text-align: center;
            font-size: 36px;
            line-height: 40px;
            box-shadow: 0 0 0 0px #9c27b0;
            overflow: hidden;


            input:checked~.toggle
            box-shadow: 0 0 0 300px #9c27b0;
            transform: rotate(500deg);
            background-color: #9c27b0;

            <div class="card">
            <input type="checkbox" name="">
            <div class="toggle">+</div>
            <div class="imgBox"> </div>
            <div class="content"> </div>
            <div class="details">

            <h2>A quick check on CSS</h2>
            <p> Just doing a quick test on CSS</p>


            </div>
            </div>








            share|improve this answer

























            • Hey I uploaded a new screenshot explaining in more details. Hope it helps and thanks for your time. pasteboard.co/I7uA6am.jpg

              – Thomas_da_tank
              Mar 28 at 9:53















            0
















            is this how you want it?






            card 
            position: relative;
            width: 300px;
            height: 400px;
            background: #262626;


            input,
            .toggle
            position: absolute;
            width: 50px;
            height: 50px;
            bottom: 20px;
            right: 20px;
            border: none;
            outline: none;
            z-index: 10;


            input
            opacity: 0;


            .toggle
            pointer-events: none;
            border-radius: 50%;
            background: #fff;
            transition: 0.5s;
            text-align: center;
            font-size: 36px;
            line-height: 40px;
            box-shadow: 0 0 0 0px #9c27b0;
            overflow: hidden;


            input:checked~.toggle
            box-shadow: 0 0 0 300px #9c27b0;
            transform: rotate(500deg);
            background-color: #9c27b0;

            <div class="card">
            <input type="checkbox" name="">
            <div class="toggle">+</div>
            <div class="imgBox"> </div>
            <div class="content"> </div>
            <div class="details">

            <h2>A quick check on CSS</h2>
            <p> Just doing a quick test on CSS</p>


            </div>
            </div>








            share|improve this answer

























            • Hey I uploaded a new screenshot explaining in more details. Hope it helps and thanks for your time. pasteboard.co/I7uA6am.jpg

              – Thomas_da_tank
              Mar 28 at 9:53













            0














            0










            0









            is this how you want it?






            card 
            position: relative;
            width: 300px;
            height: 400px;
            background: #262626;


            input,
            .toggle
            position: absolute;
            width: 50px;
            height: 50px;
            bottom: 20px;
            right: 20px;
            border: none;
            outline: none;
            z-index: 10;


            input
            opacity: 0;


            .toggle
            pointer-events: none;
            border-radius: 50%;
            background: #fff;
            transition: 0.5s;
            text-align: center;
            font-size: 36px;
            line-height: 40px;
            box-shadow: 0 0 0 0px #9c27b0;
            overflow: hidden;


            input:checked~.toggle
            box-shadow: 0 0 0 300px #9c27b0;
            transform: rotate(500deg);
            background-color: #9c27b0;

            <div class="card">
            <input type="checkbox" name="">
            <div class="toggle">+</div>
            <div class="imgBox"> </div>
            <div class="content"> </div>
            <div class="details">

            <h2>A quick check on CSS</h2>
            <p> Just doing a quick test on CSS</p>


            </div>
            </div>








            share|improve this answer













            is this how you want it?






            card 
            position: relative;
            width: 300px;
            height: 400px;
            background: #262626;


            input,
            .toggle
            position: absolute;
            width: 50px;
            height: 50px;
            bottom: 20px;
            right: 20px;
            border: none;
            outline: none;
            z-index: 10;


            input
            opacity: 0;


            .toggle
            pointer-events: none;
            border-radius: 50%;
            background: #fff;
            transition: 0.5s;
            text-align: center;
            font-size: 36px;
            line-height: 40px;
            box-shadow: 0 0 0 0px #9c27b0;
            overflow: hidden;


            input:checked~.toggle
            box-shadow: 0 0 0 300px #9c27b0;
            transform: rotate(500deg);
            background-color: #9c27b0;

            <div class="card">
            <input type="checkbox" name="">
            <div class="toggle">+</div>
            <div class="imgBox"> </div>
            <div class="content"> </div>
            <div class="details">

            <h2>A quick check on CSS</h2>
            <p> Just doing a quick test on CSS</p>


            </div>
            </div>








            card 
            position: relative;
            width: 300px;
            height: 400px;
            background: #262626;


            input,
            .toggle
            position: absolute;
            width: 50px;
            height: 50px;
            bottom: 20px;
            right: 20px;
            border: none;
            outline: none;
            z-index: 10;


            input
            opacity: 0;


            .toggle
            pointer-events: none;
            border-radius: 50%;
            background: #fff;
            transition: 0.5s;
            text-align: center;
            font-size: 36px;
            line-height: 40px;
            box-shadow: 0 0 0 0px #9c27b0;
            overflow: hidden;


            input:checked~.toggle
            box-shadow: 0 0 0 300px #9c27b0;
            transform: rotate(500deg);
            background-color: #9c27b0;

            <div class="card">
            <input type="checkbox" name="">
            <div class="toggle">+</div>
            <div class="imgBox"> </div>
            <div class="content"> </div>
            <div class="details">

            <h2>A quick check on CSS</h2>
            <p> Just doing a quick test on CSS</p>


            </div>
            </div>





            card 
            position: relative;
            width: 300px;
            height: 400px;
            background: #262626;


            input,
            .toggle
            position: absolute;
            width: 50px;
            height: 50px;
            bottom: 20px;
            right: 20px;
            border: none;
            outline: none;
            z-index: 10;


            input
            opacity: 0;


            .toggle
            pointer-events: none;
            border-radius: 50%;
            background: #fff;
            transition: 0.5s;
            text-align: center;
            font-size: 36px;
            line-height: 40px;
            box-shadow: 0 0 0 0px #9c27b0;
            overflow: hidden;


            input:checked~.toggle
            box-shadow: 0 0 0 300px #9c27b0;
            transform: rotate(500deg);
            background-color: #9c27b0;

            <div class="card">
            <input type="checkbox" name="">
            <div class="toggle">+</div>
            <div class="imgBox"> </div>
            <div class="content"> </div>
            <div class="details">

            <h2>A quick check on CSS</h2>
            <p> Just doing a quick test on CSS</p>


            </div>
            </div>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Mar 28 at 9:10









            Xenio GraciasXenio Gracias

            2,4011 gold badge5 silver badges12 bronze badges




            2,4011 gold badge5 silver badges12 bronze badges















            • Hey I uploaded a new screenshot explaining in more details. Hope it helps and thanks for your time. pasteboard.co/I7uA6am.jpg

              – Thomas_da_tank
              Mar 28 at 9:53

















            • Hey I uploaded a new screenshot explaining in more details. Hope it helps and thanks for your time. pasteboard.co/I7uA6am.jpg

              – Thomas_da_tank
              Mar 28 at 9:53
















            Hey I uploaded a new screenshot explaining in more details. Hope it helps and thanks for your time. pasteboard.co/I7uA6am.jpg

            – Thomas_da_tank
            Mar 28 at 9:53





            Hey I uploaded a new screenshot explaining in more details. Hope it helps and thanks for your time. pasteboard.co/I7uA6am.jpg

            – Thomas_da_tank
            Mar 28 at 9:53


















            draft saved

            draft discarded















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55393633%2fnested-div-borders-wont-stay-inside-the-main-div-when-inputchecked%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown









            HxCEv8DXT2x 4fFFjrm2xNiqAfWDnbJTyNQ,LF,xorO0 8RJ LqL3TsF,9XYuZvKIaGu6nm St7Vo3Tat Jzt8y5zICBITP hgwyntpQSIo
            qJc,2TTvoZPO

            Popular posts from this blog

            Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

            SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

            은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현