Checkbox styling only css

Question

I have a checkbox and i would like to style it. When the checkbox is unchecked it should have a black border and when the checkbox is checked the hole checkbox should be black without hook. Below you see what i have done so far. Sadly it wont work.

My Code:

<form>
    <input class="newsletter" type="checkbox" value="text">Ich möchte den Newsletter bekommen
</form>

input[type=checkbox]:not(old){
  width     : 13px;
  margin    : 0;
  padding   : 0;
  opacity   : 0;
}  

.newsletter:unchecked{
    width:13px;
    height: 13px;
    border: 2px solid black;
border-radius:3px;
}

.newsletter:checked{
    width:13px;
    height: 13px;
    border: 2px solid black;
    background-color:black;
border-radius:3px;
}

The first part of my code should hide the current checkbox. The second part should be the checkbox when the box is unchecked and the third part when the box is checked. I thought this is how you are styling these checkboxes. What am i doing wrong?

Abhishek Pandey · Accepted Answer · 2016-10-25 08:26:45Z

2

This may help you

.checkbox input[type=checkbox] {
  display: none;
}
.checkbox input[type=checkbox]:not(:checked) + label:before {
  content: "";
  border: 2px solid #000;
  height: 10px;
  width: 10px;
  display: inline-block;
}
.checkbox input[type=checkbox]:checked + label:before {
  content: "";
  border: 2px solid #000;
  height: 10px;
  width: 10px;
  background: #000;
  display: inline-block;
}

<form>
  <div class="checkbox">
    <input id="check" class="newsletter" type="checkbox" value="text">
    <label for="check"> Ich möchte den Newsletter bekommen</label>
  </div>
</form>

edited Oct 25, 2016 at 8:26

answered Oct 25, 2016 at 8:16

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karl Brown · Accepted Answer · 2016-10-25 08:18:55Z

The first thing you need to do with your code is add a label, e.g.:

<form>
  <input class="newsletter" type="checkbox" value="text" id="newsletter" name="newsletter">
   <label for="newsletter">Ich möchte den Newsletter bekommen</label>
</form>

I've also added an id and name attribute to the checkbox. The id needs to be the same as the for attribute on the label for this trick to work.

Next, we need to visibly hide the checkbox. I tend to use a class of sr-only in the CSS to visibly hide things based on Yahoo's example:

.sr-only{
  height: 1px;
  width: 1px;
  overflow: hidden
  clip: rect(1px,1px,1px,1px);
  position: absolute;
}

Next we create a pseudo element before the label. For the style rules I'm using the adjacent sibling selector (+) to apply the rules when the label is an adjacent sibling of the checkbox. I'm keeping your class name so it'll only target labels that're siblings of class newsletter:

.newsletter:not(checked) + label:before{
  content:" ";  
  display: inline-block;
  width:13px;
  height: 13px;
  border: 2px solid black;
  border-radius:3px;
}

The :not(checked) means apply these rules when newsletter is not checked.

To change the styles when newsletter is checked we change the background colour like this:

.newsletter:checked + label:before{
 background-color:black;
}

This way clicking our pseudo checkbox or the text in the label will check the box (clicking the label at all sends focus to the field, so with a checkbox will check it).

You are genius!!! That worked Thanks. I quess i can use that also for radio buttons.

Collectives™ on Stack Overflow

Checkbox styling only css

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related