Firefox - Remove border from undecorated checkbox

Question

I have a checkbox the has the appearance: none;. This working in chrome, but in Firefox it leaves behind an inset border that I cannot remove. I have tried border: none already.

I've a fiddle here: http://jsfiddle.net/jcJJ5/

Wouldn't display none in a checkbox rule take away the entire box? — Brant, Jul 19 '12 at 00:19
@AlexW I still want the checkbox to show my own background image, just not with the border. — trumank, Jul 19 '12 at 00:20
@ZoltanToth Yes, I have that applied. It does remove the checkbox look, but still leaves the border. — trumank, Jul 19 '12 at 00:21
@MathWizz http://stackoverflow.com/questions/3544690/how-do-i-remove-checkbox-border — Alex W, Jul 19 '12 at 00:37
@AlexW I saw that, but I assumed the asker was referring to the normal border (`appearance: checkbox`). — trumank, Jul 19 '12 at 00:43
@MathWizz Here's another: http://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css — Alex W, Jul 19 '12 at 00:50
@MathWizz I have never tried this but I hope it helps.. orignally posted on — Scorpio, Jul 19 '12 at 00:55

score 6 · Accepted Answer · answered Jul 19 '12 at 01:09

Unfortunately, it doesn't seem that setting any properties on the checkbox will help.

The only simple workaround that I have found is to wrap the checkbox in a <div>, and obscure the borders.

See my Fiddle.

HTML:

<div class="checkbox-container"><input type="checkbox" /></div>

CSS:

input[type="checkbox"] {
    width: 110px;
    height: 110px;
    background: red;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    position: relative;
    left: -5px;
    top: -5px;
}
.checkbox-container {
    position: absolute;
    display: inline-block;
    margin: 20px;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

By the way, (in Firefox at least), setting background doesn't have any effect.

score 0 · Answer 2 · answered Jul 19 '12 at 02:36

you could try setting a -moz-box-shadow: with the color of the two lines that are lighter to cover the dark inset the firefox creates...

also, i tried playing around in firebug and if u turn of -moz-appearance: none, the checkbox is completely fine and has a normal styling that you shouldn't need to play around with.

score 0 · Answer 3 · answered Aug 03 '21 at 12:32

0

Update from 2021, it seems that the appearance has been working fine in Firefox for some time now. This issue covers the process.

answered Aug 03 '21 at 12:32

Dimitar Spassov

2,535
2
7
17

Firefox - Remove border from undecorated checkbox

3 Answers3

Linked