Question

input的任何样式都会影响每个输入元素。有没有办法指定样式以仅应用复选框而不对每个复选框元素应用类？

Answer 1

使用CSS 2，您可以这样做：

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

现在应该广泛支持..要查看对浏览器的支持，请转到此处：https://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

Answer 2

我最近发现的用于设置收音机按钮和复选框样式的东西。之前，我不得不使用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;。

希望这对你有用。

Answer 3

课程也很有效，例如：

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

<form>
  <input class="checkbox" type="checkbox" />
</form>

Answer 4

我创建了自己的解决方案，没有标签

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">

Answer 5

您只能通过执行以下操作来应用于某些属性：

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

它解释了它here。

Answer 6

input[type="checkbox"] {
 /* your style */
}

但是这只适用于除IE7及以下版本的浏览器，对于那些你必须使用类的浏览器。

Answer 7

由于IE6不理解属性选择器，因此您可以组合一个仅由IE6（带条件注释）和jQuery或者Dean Edwards的 IE7.js 看到的脚本。

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

使用类或jQuery或IE7.js的选择取决于您的喜好和您的其他需求（在您的网站中可能是PNG-24透明度，而不必依赖PNG-8完全透明，可以回退到1位IE6上的透明度 - 仅由Fireworks和pngnq等创建）

Answer 8

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

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

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

在Windows 8的IE10中显示如下：

enter image description here

Answer 9

虽然CSS确实提供了一种方法来执行特定于复选框类型或其他类型的样式，但是不支持这种情况的浏览器会出现问题。

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

只需在您的复选框中添加class =“复选框”。

然后在你的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获得支持时，你将能够从复选框中删除ie特定的css代码以及css类。

Answer 10

感谢所有为这篇文章做出贡献的人。看看我使用纯 CSS 能够完成什么。

input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 0px;
  height: 0px;
}

input[type=checkbox]:checked:before {
      content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  border: 4px solid #FFCB9A;
  border-radius: 20px;
  background-color: #445768;  
  transition: all 0.2s linear;
}


input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  border: 4px solid #FFCB9A;
  border-radius: 3px;
  background-color: #445768;
}


input[type=checkbox]:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: solid #FFCB9A;
  border-width: 0 0px 0px 0;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  position: absolute;
  top: 0px;
  left: 50px;
  transition: all 0.2s linear;
}

input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 12px;
  height: 21px;
  border: solid #FFCB9A;
  border-width: 0 5px 5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 14px;
}

<input type="checkbox">

总结

因此，以下内容控制了我们通过添加 h:0 和 w:0 隐藏的实际复选框。

input[type=checkbox] {...}

其余部分控制虚拟复选框。

这控制了选中时虚拟复选框的背景。

input[type=checkbox]:checked:before {...}

这在未选中时控制虚拟复选框的背景。

input[type=checkbox]:before {...}

这在未选中时控制虚拟复选框的前景。

input[type=checkbox]:after {...}

这控制了选中时虚拟复选框的前景。

input[type=checkbox]:checked:after {...}

我真的希望它对你的帮助和对我的帮助一样多:)

CSS复选框输入样式

10 个答案: