jnollette jnollette - 4 months ago 58
CSS Question

Style a checkbox in firefox — remove check and border

How do I style a checkbox in firefox, and have the checkmark and border disappear?

http://jsfiddle.net/moneylotion/qZvtY/

CSS:

body { background: black; }
#conditions-form { color: white; }
#conditions-form input[type=checkbox] {
display:inline-block;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance:none;
appearance: none;
width:19px;
height:19px;
background: url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox.gif') no-repeat top left;
cursor:pointer;
}
#conditions-form input[type=checkbox]:checked {
background:url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox-checked.gif') no-repeat top left;
}


HTML:

<form id="conditions-form">
<ul>
<li>
<input id="condition3" type="checkbox" name="conditions[condition3]"></input>
<label class="checkbox" for="condition3">Conditions 3</label>
</li>
</ul>
</form>

Answer

This tutsplus tutorial solved my question.

input[type="checkbox"] {
  display:none;
}
 
input[type="checkbox"] + label span {
  display:inline-block;
  width:19px;
  height:19px;
  margin:-1px 4px 0 0;
  vertical-align:middle;
  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
  cursor:pointer;
}
input[type="checkbox"]:checked + label span {
  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>