0

I would like to know how to color the checkboxes, I have to create several of different colors without using php, how do we deal with the chexboxes of different id? the content: '✔' doesn't display.. Thanks for your help

enter image description here

input[type='checkbox'] {
  color:orange;
  outline: 1px solid orange;
  width: 14px !important;
  height: 14px !important;
  margin: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  content: '';
  box-shadow: none;
  font-size: 0.8em;
  text-align: center;
  line-height: 1em;

}

input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
     content: '✔';

     color: orange;
}
<input type="checkbox" id="orange" value="" checked="checked">
<input type="checkbox" id="purple" value="">
<input type="checkbox" id="pink"  value="">

com/h533A.jpg

Emma
  • 47
  • 2
  • 9
  • Would `-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;` hide it? – Rojo Dec 17 '20 at 15:36
  • 2
    Does this answer your question? [How to style a checkbox using CSS](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css) – Rojo Dec 17 '20 at 15:39

2 Answers2

0

input[type='checkbox']{
  width: 14px ;
  height: 14px ;
  outline: 1px solid orange;
  box-shadow: none;
  font-size: 1em;
  text-align: center;
  line-height: 1em;
  background: white;
  -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 appearance: none;
}
input[type='checkbox']:checked:after {
  content: '✔';
  color: orange;
}
<input type="checkbox" class="checkbox" id="orange" value="" checked="checked">

You can use this code for compare and check with your code

CSS code

input[type='checkbox']{
  width: 14px ;
  height: 14px ;
  outline: 1px solid orange;
  box-shadow: none;
  font-size: 1em;
  text-align: center;
  line-height: 1em;
  background: white;
  -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 appearance: none;
}
input[type='checkbox']:checked:after {
  content: '✔';
  color: orange;
}

html code

<input type="checkbox" class="checkbox" id="orange" value="" checked="checked">
P_ DAIKI
  • 1
0

I replace '✔' by '\2713'; in css, it works

Emma
  • 47
  • 2
  • 9