Style a checkbox in firefox — remove check and border

Question

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

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>

It doesn't look like it's possible: https://coderwall.com/p/a7tbrq — Joshua Dwire, Oct 02 '13 at 19:51
Please look at this question http://stackoverflow.com/q/4148499/1741542 — Olaf Dietsche, Oct 02 '13 at 20:24
maybe similar question http://stackoverflow.com/questions/11552228/firefox-remove-border-from-undecorated-checkbox — Pravin W, Oct 03 '13 at 19:13
Would you mind telling what is it you are trying to achieve? May be there is another way. — Lokesh Suthar, Feb 18 '14 at 15:22

score 31 · Answer 1 · edited Jan 26 '17 at 16:22

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.

It works, but I don't recommend using the display none attribute as it's not accessible. @Lee Chase solution is more appropriate. — Julio Cesar Brito Gomes, Sep 15 '21 at 19:27
@JulioCesarBritoGomes I'm not sure what you mean exactly; what do you mean by 'accessible'? You can click on the input using the label, right? — Joeytje50, Sep 17 '21 at 13:37
@Joeytje50 When I talk about accessibility, I'm talking about blind or low vision people who use screen readers to browse the internet. Screen readers (NVDA, Voice Over...) generally ignore anything with display: none, therefore it is not read out to screen readers. See more at https://www.nomensa.com/blog/how-improve-web-accessibility-hiding-elements OR https://www.w3.org/standards/webdesign/accessibility — Julio Cesar Brito Gomes, Sep 20 '21 at 14:40

score 20 · Answer 2 · edited Aug 07 '16 at 16:35

The accepted answer above is great but this slight tweak to the fiddle from Joeytje50 allows the check-boxes to be tabbed to.

Using opacity 0 instead of display none means the checkbox is still tabbable and hence accessible by keyboard.

Position absolute places the input checkbox top left of the drawn box meaning your formatting stays neat.

input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}
input[type="checkbox"] + label {
    text-align:center;
    cursor:pointer;
}
input[type="checkbox"]:focus + label {
    background-color: #ddd;
}
input[type="checkbox"] + label div {
    display:inline-block;
    line-height: 16px;
    font-size: 12px;
    height: 16px;
    width: 16px;
    margin:-0px 4px 0 0;
    border: 1px solid black;
    color: transparent;
}
input[type="checkbox"]:checked + label div {
    color: black;
}

<input type="checkbox" id="c1" name="cc" />
<label for="c1">
    <div>&#x2714;</div>Check Box 1<br />
</label>
<input type="checkbox" id="c12" name="cc" />
<label for="c12">
    <div>&#x2714;</div>Check Box 2<br />
</label>

Position absolute will mess up your scrolling unless the container is position relative — Jamie Pate, Jun 18 '15 at 22:39
I quite liked this solution - so I created a [forked fiddle](http://jsfiddle.net/icc97/3tgo3yq4/) and added a bit of [material bootswatch](http://bootswatch.com/paper/) styling to the checkboxes (that material bootswatch doesn't support firefox - hence why I came searching) — icc97, Aug 07 '16 at 16:29

score 9 · Accepted Answer · edited Aug 07 '16 at 16:43

9

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>

edited Aug 07 '16 at 16:43

icc97

11,395
8
76
90

answered Feb 18 '14 at 18:57

jacobnollette

524
1
4
13

3

N.B. [Link only answers are discouraged](http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers) as if the link disappears then the answer becomes useless - I will edit this answer to add in the relevant HTML + CSS – icc97 Aug 07 '16 at 15:58

score 4 · Answer 4 · answered Apr 03 '17 at 16:58

A cleaner solution IMHO that uses pure css to redraw the elements.

Codepen

                input[type="checkbox"] {
            opacity: 0;
            position: absolute;
        }

        input[type="checkbox"] ~ label:before {
          content: '';
          display: inline-block;
          cursor: pointer;
          ...
          border: 3px solid #999;
          border-radius: 2px;
          transition: .3s;
        }

        input[type="checkbox"]:checked ~ label:before {
          background: #333;
        }

This *almost* works. If you don't use `
` tags to separate each item, you're actually checking an individual item plus all the items that follow. I'm don't have a solution, but it even checks all the radio buttons that follow. — user2225804, Sep 27 '19 at 15:47

Style a checkbox in firefox — remove check and border

4 Answers4

Linked