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?

Answer 1

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> 

Answer 2

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

<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).