Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Style a checkbox in firefox — remove check and border

Tags:

html

css

firefox

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>
like image 280
jnollette Avatar asked Oct 02 '13 19:10

jnollette


People also ask

How do you remove a border from a checkbox?

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.

Can you style checkboxes?

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.


1 Answers

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.

like image 65
Joeytje50 Avatar answered Oct 01 '22 21:10

Joeytje50