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

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>

Your CSS needs `{}` and `;` unless you are using a new preprocessor...? — zer00ne, Aug 19 '16 at 02:19

Jerad Rutnam · Accepted Answer · 2016-08-19T04:10:03.653

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/

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

No way to select a parent with CSS only (until CSS4), so you must use JS..

See this post that talking about it here.

edited May 23 '17 at 12:00

Community

1
1

answered Aug 19 '16 at 02:11

MomasVII

4,641
5
35
52

score 0 · Answer 3 · answered Aug 19 '16 at 02:19

0

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

answered Aug 19 '16 at 02:19

Alex Brock

36
2

score 0 · Answer 4 · answered Aug 19 '16 at 02:28

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

score 0 · Answer 5 · answered Mar 17 '17 at 14:19

0

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>

answered Mar 17 '17 at 14:19

Hassan Saeed

6,326
1
39
37

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

5 Answers5

Simply NO,

But You can achieve this by using CSS siblings selector,

But You can achieve this by using CSS `siblings` selector,