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
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
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;
- 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
add a comment |
- 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
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
add a comment |
- 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
- 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
css3
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
add a comment |
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
add a comment |
2 Answers
2
active
oldest
votes
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>
add a comment |
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>
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
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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>
add a comment |
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>
add a comment |
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>
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>
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
add a comment |
add a comment |
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>
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
add a comment |
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>
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
add a comment |
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>
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>
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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