CODEWITHSUNDEEP
htmlcss
Vahe
Vahe

Reputation: 1841

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

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>

Upvotes: 0

Views: 2185

Answers (5)

Hassan Saeed
Hassan Saeed

Reputation: 7080

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>

Upvotes: 0

Jerad Rutnam
Jerad Rutnam

Reputation: 1546

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/

Upvotes: 1

Rakhat
Rakhat

Reputation: 4942

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

Upvotes: 0

Alex Brock
Alex Brock

Reputation: 36

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

Upvotes: 0

MomasVII
MomasVII

Reputation: 5061

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

See this post that talking about it here.

Upvotes: 0

Related Questions