How do I apply a border around a checkbox when checked? - html

Question

I want to check a checkbox and apply a 1px border around it via an enclosing span tag.
I am a bit stuck on how to detect the checked css property and select the parent span to apply a property to the span? Can I achieve this with only CSS? Below is what I have so far.
CSS(Sass)
input.checkbox
opacity: 0
span.check
width: 16px
height: 16px
border: 2px solid black
display: inline-block
position: relative
input.checkbox:checked <--once i detect checked I am unsure how to apply the border to the parent span tag
background: black
position: absolute
top: -8px
left: 0px
HTML
<span class='check'><input type="checkbox" class="checkbox" name="" /></span>

Answer 1

Simply NO,
Cascading does not works like that way. You can't select parent in CSS. But yes you can do this by using sass/scss. But it will not work as you expected.
It will just create a parent wrapper class. But it will not behave using the state of the child element. Because after compiling it's just CSS
We might get a parent selector in the future, may be in CSS4. So we are keeping our fingers crossed. :)
e.g.
SASS
input.checkbox
opacity: 0
span.check
width: 16px
height: 16px
border: 2px solid black
display: inline-block
position: relative
input.checkbox:checked
background: black
position: absolute
top: -8px
left: 0px
span.check &
border: 2px solid black
Output CSS,
input.checkbox {
opacity: 0;
}
span.check {
width: 16px;
height: 16px;
border: 2px solid black;
display: inline-block;
position: relative;
}
input.checkbox:checked {
background: black;
position: absolute;
top: -8px;
left: 0px;
}
span.check input.checkbox:checked {
border: 2px solid black;
}
But You can achieve this by using CSS siblings selector,
HTML,
<label>
<input class="checkbox" type="checkbox">
<span class="check"></span>
</label>
CSS,
label {
position: relative;
}
input.checkbox {
opacity: 1;
position: absolute;
}
input.checkbox:checked + span.check {
width: 16px;
height: 16px;
border: 2px solid black;
display: inline-block;
position: absolute;
}
Working example: https://jsfiddle.net/HA3bQ/167/

Answer 2

No way to select a parent with CSS only (until CSS4), so you must use JS..
See this post that talking about it here.

Answer 3

I have not seen that done using CSS, only within the javascript wherever the checkbox resides.

Answer 4

You can put some element after input
<label>
<input class="checkbox" type="checkbox">
<span class="checkmark></span>
</label>
And style with pseudo class :checked
.checkbox:checked ~ .checkmark {
// There goes styles for custom checkmark
}
Recommend look at this site for full examples

Answer 5

the simple answer is just use outline in css style
input.checkbox:checked {
outline: 2px solid black;
}
<span class='check'><input type="checkbox" class="checkbox" name="" /></span>