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>
You can remove that by unselecting the "highlight existing form fields" function at the top of your document. If you are talking about the actual outline of the "box" part of a checkbox, you can bring up the field properties, then go to the Appearance tab and set both border color and fill color to transparent.
A checkbox is an HTML element that takes input from the user. It is possible to style a checkbox using Pseudo Elements like :before, :after, hover and :checked. To style the checkbox the user first needs to hide the default checkbox which can be done by setting the value of the visibility property to hidden.
There's a quite easy way you can do this via <label>
tags. Just place a label around the checkbox, and insert a dummy element that will be used for the custom styled checkbox. For example:
label.checkbox input[type="checkbox"] {display:none;}
label.checkbox span {
display:inline-block;
border:2px solid #BBB;
border-radius:10px;
width:25px;
height:25px;
background:#C33;
vertical-align:middle;
margin:3px;
position: relative;
transition:width 0.1s, height 0.1s, margin 0.1s;
}
label.checkbox :checked + span {
background:#6F6;
width:27px;
height:27px;
margin: 2px;
}
label.checkbox :checked + span:after {
content: '\2714';
font-size: 20px;
position: absolute;
top: -2px;
left: 5px;
color: #99a1a7;
}
<label class="checkbox">
<input type="checkbox"/>
<span></span>
I like cake
</label>
EDIT: Note that some choices of colours might render the state of your checkbox invisible for colourblind people. When making this code I didn't think of that, but the above demo might be invisible for R/G colourblind people. When implementing this, please do keep that in mind (pick bright/dark colours for example, or show some difference in shape)
The styles I used are just arbitrary, and you can change that to anything you want. You can even toggle certain text inside it via the ::before
pseudo-element, such as what I've done here.
I wasn't able to open the image url you provided to use in your question, but I think you'll be able to include whatever image you want by simply modifying this code a little. Just change the current background
color to the image URL you want to use.
Note: This won't work in some older browsers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With