Is it possible to style a checkbox using CSS?

Question

My current CSS:

.DataForm input
{
    margin-right:9px;
    display: inline-block;
    width:21%;
    min-width:30px;
}

works fine for all inputs except checkbox, because checkboxes are annoying and split themselves into an input and a label.

Is there a way to CSS the input based on its type? (the type field is checkbox for checkboxes).

Answer 1

something like:

.DataForm input[type='checkbox']{ }

Watch out for browser support though... bets are on that it won't work in IE6

Answer 2

You can access elements by any attribute using the attribute selector in CSS

In your case this would look like:

.DataForm input[type="checkbox"]{}

Here's what the W3C say about Attribute Selectors:

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Paul is correct when he warns about different browsers. IE6 doesn't support this type of selector.

Answer 3

There are some really great jQuery checkbox replacements (if you are willing to consider javascript in addition to css).

Check out http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/

Answer 4

You need an additional selector that targets just checkboxes, then you can reset the problematic CSS styles...

.DataForm input {
  margin-right:9px;
  display: inline-block;
  width:21%;
  min-width:30px;
}

.DataForm input[type=checkbox] {
  width:auto;
  min-width:auto;
}

Answer 5

There was a pretty good way posted by filament group

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)

As the title says it uses a bit of jQuery but degrades very nicely. You could combine this with the other answers that state to use the css

input[type='checkbox']{ }

And only run this javascript when the user comes in an browser that does not support this css such as ie6.