Checkbox Styling Only Css

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 with

Solution 1:

This may help you

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

<form><divclass="checkbox"><inputid="check"class="newsletter"type="checkbox"value="text"><labelfor="check"> Ich möchte den Newsletter bekommen</label></div></form>

Solution 2:

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

<form><inputclass="newsletter"type="checkbox"value="text"id="newsletter"name="newsletter"><labelfor="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).