Question

我目前的CSS：

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

适用于除复选框之外的所有输入，因为复选框很烦人并将它们分成输入和标签。

有没有办法根据类型输入CSS？（类型字段是复选框的复选框）。

Answer 1

您可以使用CSS

中的属性选择器按任意属性访问元素

在您的情况下，这将是：

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

以下是W3C对属性选择器的评价：

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

当Paul警告不同的浏览器时，他是正确的。 IE6不支持这种类型的选择器。

Answer 2

你需要一个额外的选择器，只针对复选框，然后你可以重置有问题的CSS样式......

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

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

Answer 3

类似的东西：

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

注意浏览器支持虽然...但是它在IE6中无法正常工作

Answer 4

有一些非常棒的jQuery复选框替换（如果你愿意考虑除了css之外的javascript）。

查看http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/

Answer 5

灯丝组发布了一个非常好的方法

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

正如标题所说，它使用了一些jQuery但降级非常好。您可以将此与其他说明使用css

的答案结合起来

input[type='checkbox']{ }

当用户进入不支持此CSS的浏览器（例如ie6）时，才运行此javascript。

是否可以使用CSS设置复选框的样式？

5 个答案: