Checkbox background color and style

Question

I have read that due the different browser settings there aren't any good ways to style checkboxes. I know that you should be able to change background color with wrapping every checkbox into Div, but how about border and arraow?

But maybe someone have any tips to style them like this:

At the moment I have default in Firefox :

I don't have Firefox, so are those the default styles, or have you already styled them for yourself (and if so, can you please show the CSS)? — Jonathan Lam, Aug 09 '16 at 13:06
http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css — Andrew, Aug 09 '16 at 13:07

score 3 · Answer 1 · answered Aug 09 '16 at 13:15

Use masked overlay

label {
  display: block;
  border: 4px solid #88a;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .3) inset;
  border-radius: 10%;
  width: 1em;
  height: 1em;
}
input {
  display: none;
}
input:checked + label {
  background-color: rgba(0, 255, 0, .8);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, .1) inset;
}

<input type="checkbox" id="chk">
<label for="chk"></label>

score 1 · Answer 2 · answered Aug 09 '16 at 13:22

I believe the best way is to wrap the radio / checkbox in a span, div (whatever) then have a label with the for attribute linking to the id of the input.

Then hiding the input using visibility:hidden and styling the label however you would like. (Note you can have multiple labels for one input).

You can use a before or after to add the check marks.

.styled-radio {
  visibility:hidden;
  position:absolute;
  z-index:-2;
 }

.styled-radio-label {
  border:1px solid #ccc;
  height:15px;
  width:15px;
  position:relative;
}


.styled-radio:checked + .styled-radio-label:after {
  content:'\2713';
  position:absolute;
  left:50%;
  top:50%;
  transform:translateY(-50%) translateX(-50%);
}

label {
  display:inline-block;
  vertical-align:middle;
}

<span>
  <input type='radio' id='html' value='html' class='styled-radio' name='lang'/>
  <label for='html' class='styled-radio-label'></label>
  <label for='html'>HTML</label>
</span>

<span>
  <input type='radio' id='css' value='css' class='styled-radio' name='lang'/>
  <label for='css' class='styled-radio-label'></label>
  <label for='css'>CSS</label>
</span>

<span>
  <input type='radio' id='JS' value='JS' class='styled-radio' name='lang'/>
  <label for='JS' class='styled-radio-label'></label>
  <label for='JS'>JS</label>
</span>

score 0 · Answer 3 · answered Aug 09 '16 at 13:18

Deddy, you can style elements after <input> with css code input + div. If checkbox is checked try style input:checked + div. If you hide input element, and surround all with <label>, you can easily styling div element and other inside them. The rest depends on your imagination ;)

<label>
    <input type="checkbox">
    <div></div>
</label>

score 0 · Answer 4 · answered Oct 28 '20 at 18:31

My mission was to work well with bootstrap. I used FontAwesome for content.

input[type=checkbox] {
    -moz-appearance:none;
    -webkit-appearance:none;
    -o-appearance:none;
    outline: none !important;
    content: none;  
}

input[type=checkbox]:before {
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 13px;
    border-radius:4px;
    color: transparent !important;
    background: #fff;
    display: block;
    width: 17px;
    height: 17px;
    border: 2px solid #d3d6db;
    margin-right: 7px;
   
}

input[type=checkbox]:checked:before {
  background: #3ea8df;
    color: rgba(255,255,255, 0.85) !important;
  border: 2px solid #3ea8df;
  border-radius:4px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="col-xs-6" >
  <input type="checkbox" name="chk"><span class="meme">Manga</span>
  </span>
<span>
<span class="col-xs-6" >
  <input type="checkbox" name="chk"><span class="meme">Comics</span>
  </span>
<span>

.meme {
  margin-top:4px;
}

Jaroslaw Jankowiak · Answer 5 · 2016-08-09T13:15:10.210

-1

If you use Fontawesome (http://fontawesome.io/icons/), you will be able to style this elements like any other font. Or http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/

edited Aug 09 '16 at 13:15

answered Aug 09 '16 at 13:09

Jaroslaw Jankowiak

40
4

Welcome to Stack Overflow! Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Jonathan Lam Aug 09 '16 at 13:34

Checkbox background color and style

5 Answers5