CSS复选框输入样式

176

任何样式input都会影响每个输入元素。有没有一种方法可以指定仅应用于复选框的样式，而无需将类应用于每个复选框元素？

css 
— 利
source

Answers:

310

使用CSS 2，您可以执行以下操作：

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

到目前为止，这应该已经得到广泛的支持。查看对浏览器的支持

— 安德鲁·黑尔
source
18
我相信IE 7和更高的支持属性选择器，它们实际上是CSS 2.1。 quirksmode.org/css/contents.html
— TJ L 2009年
2
@realtebo：请注意，许多样式（边框，背景等）无法直接应用于HTML复选框。
— 罗伊·廷克
1
@RoyTinker您可以将outline而不是border用作复选框。
— TylerH
28

我创建自己的无标签解决方案

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
展开摘要

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
展开摘要

— 恩克·亚姆古尔
source
如何与灰色背景做，因为这图像（i.stack.imgur.com/Q23fy.png），如果你可以看看我的文章（pt.stackoverflow.com/questions/436890/estilizar-checkbox）。谢谢。
— 蒂亚戈
太棒了！您能否将答案放在我的帖子中，以标记为已完成？
— Tiago
1
经过数小时的搜索和测试，这是唯一对我有用的东西。谢谢！
— 标记
1
令人敬畏的例子
— Adrian Grygutis
24

我最近发现了一些用于设置单选按钮和复选框样式的东西。在此之前，我不得不使用jQuery和其他东西。但这很简单。

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

您可以对复选框执行相同的操作，显然将更input[type=radio]改为，input[type=checkbox]然后更改border-radius:15px;为border-radius:4px;。

希望这对您有所帮助。

— 狮子座_V117
source
真的很好，太糟糕了，无法在Opera或IE上运行太多=（
— Michel Ayres 2014年
1
如果您想将自己的样式应用于复选框/输入，请通过CSS来检查有关自定义输入元素的博客。然后，您可以只使用CSS设置样式，包括IE8后备。
— Felix Hagspiel
8

类也可以很好地工作，例如：

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>
— 吉姆·费尔
source
可能没有必要将.checkbox嵌套在表单内，因为您不太可能在表单外部找到复选框。同时输入.checkbox应该是input.checkbox
— 邓肯沃克
@DuncanWalker我没有测试过，但是将form输入控件绑定到默认的提交控件不是必需的标记吗？
— Jim Fell 2016年
1
@Jim Fell这不起作用。如果我为两个不同样式的复选框（即.checkbox1 [input ='checkbox']和.checkbox2 [input ='checkbox']）创建两个不同的类，则这些样式始终都会同时起作用。.如何确保样式分开？
— 克里斯（Krys）'16
@Krys您需要为复选框元素赋予不同的类名。
— Jim Fell
4

您只能通过以下方式将其应用于某些属性：

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

它在这里解释。

— 死头
source
3

Trident::-ms-check为复选框和单选按钮控件提供了伪元素。例如：

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

在Windows 8的IE10中显示如下：

在此处输入图片说明

— 安塞尔姆
source
2

由于IE6无法理解属性选择器，因此您可以将仅IE6可见的脚本（带有条件注释）和Dean Edwards的jQuery或IE7.js结合在一起。

IE7（.js）是一个JavaScript库，使Microsoft Internet Explorer的行为类似于符合标准的浏览器。它解决了许多HTML和CSS问题，并使透明PNG在IE5和IE6下正常工作。

选择使用类还是使用jQuery或IE7.js取决于您的喜好和其他需求（也许整个站点的PNG-24透明，而不必依赖PNG-8，而完整的透明会回落到IE6的1位透明-仅由Fireworks和pngnq等创建）

— 费利佩·阿尔斯
source
1

尽管CSS确实为您提供了一种特定于复选框类型或其他类型的样式的方式，但是不支持此样式的浏览器会出现问题。

我认为在这种情况下，您唯一的选择是将类应用于您的复选框。

只需将class =“ checkbox”添加到您的复选框即可。

然后在您的CSS代码中创建该样式。

您可以做的一件事是：

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

然后使用IE特有的CSS包括：

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

您仍将需要添加该类以使其在IE中工作，并且在其他不支持IE的非IE浏览器中将无法工作。但是，这将使您的网站具有CSS代码的前瞻性，并且随着IE得到支持，您将能够从复选框中删除特定的CSS代码以及CSS类。

— 布赖恩
source
感谢您提供有关2个样式表的提示。尽管我试图避免这种事情，但我认为我只会为复选框创建样式，就这样……
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.