开发者

Is it possible to style a checkbox using CSS?

开发者 https://www.devze.com 2022-12-10 07:25 出处:网络
My current CSS: .DataForm input { margin-right:9px; display: inline-block; width:21%; min-width:30px; } works fine for all inputs except checkbox, because chec开发者_StackOverflow社区kboxes are ann

My current CSS:

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

works fine for all inputs except checkbox, because chec开发者_StackOverflow社区kboxes 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).


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.


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;
}


something like:

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

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


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/


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消