How to flatten checkbox using CSS? [duplicate]

Question

I am flattening my textboxes and textareas on a form using the following CSS:

textarea, input[type=text], select {
    border: 1px solid #B5B8C8;
}

I now want to include checkboxes .. i thought this would do the trick

textarea, input, select {
    border: 1px solid #B5B8C8;
}

in firefox it doesn't seem to make any difference. In IE 9/10 I get a weird border around the checkbox (instead of changing the checkbox itself.

Any suggestions on how to make checkboxes mimic textboxes and textareas to get rid of the 3d affect.

the only way I have found to style checkboxes and radio buttons is to use jquery, a sprite and a label — Pete
– Pete, Commented Mar 19, 2013 at 14:53
It's long been a sore point for many browsers. You basically need to hack up another way. A common technique is to hide the checkbox, and implement your own visual alternative in the GUI which manipulates it. — Jayy
– Jayy, Commented Mar 19, 2013 at 14:53

CherryFlavourPez · Accepted Answer · 2013-03-19 14:58:39Z

1

There's no cross-browser CSS only solution to normalizing form elements. For a non-JS solution that works in modern browsers, check out this CSS ninja article. Otherwise, your best option is something like Uniform, which does the hard work for you and will fall back to regular form elements with JavaScript disabled.

The benefits of using the native form elements and their styling (particularly on mobile devices) are great. That said, custom styling for checkboxes and radio buttons (as opposed to select boxes/date pickers etc) seems to work pretty well in my testing.

answered Mar 19, 2013 at 14:58

CherryFlavourPez

7,5546 gold badges48 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to flatten checkbox using CSS? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related