如何使用 CSS 选择器选择所有复选框？

Question

选择

input

会影响每个输入元素。有没有办法只选择复选框而不将类应用于每个复选框元素？

Answer 1

使用 CSS 2 你可以做到这一点：

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

现在这应该得到相当广泛的支持。 查看浏览器支持

Answer 2

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

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

Answer 3

我最近发现了一些用于设置单选按钮和复选框样式的东西。之前，我不得不使用 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 4

感谢所有对这篇文章做出贡献的人。 看看我使用纯 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 {...}

---

我真的希望它能像帮助我一样帮助你:)

Answer 5

课程也效果很好，例如：

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

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

Answer 6

您可以通过执行以下操作仅应用于某些属性：

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

它解释了它这里。

Answer 7

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

但这仅适用于除 IE7 及以下版本之外的浏览器，对于这些浏览器，您必须使用类。

Answer 8

Trident 为复选框和单选按钮控件提供

::-ms-check

伪元素。例如：

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

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

在 Windows 8 上的 IE10 中显示如下：

Answer 9

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

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

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

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

你可以做的一件事是：

主.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

我尝试了一些方法来修改输入复选框提供的默认颜色，我觉得这些颜色太大了。但我想要一些简单的东西，所以我开始探索各种平台，包括 gpt 和 Google，直到我在 YouTube 上发现了这个答案。 如果其他人遇到类似问题，我希望这会有所帮助，并且它适用于多种浏览器。

您还可以查看下面的链接有关强调色的 MDN 文档

.checkbox-zero{
    accent-color: #eda30f;
}
.checkbox-one{
    accent-color: #eb1607;
}
.checkbox-two{
    accent-color:#1aeb07;
}
.checkbox-three{
    accent-color:#eb07d4;
}

<input type="checkbox" class="checkbox-zero">
<input type="checkbox" class="checkbox-one">
<input type="checkbox" class="checkbox-two">
<input type="checkbox" class="checkbox-three">

Answer 11

由于 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 12

您可以使用此选择器将样式应用于复选框输入：

input[type='checkbox']{}

但不幸的是，它不支持自定义样式，因此您可以使用“after”和“before”来覆盖原始输入： 请参阅：演示

HTML

 <input
    type="checkbox"
    style="background-color: #d81b60; color: #fff"
    name="checkboxGreen"
  />

CSS

input[type='checkbox'] {
      position: relative;
      cursor: pointer;
      margin: 20px;
 }
 input[type='checkbox']:before {
      content: '';
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 50%;
      left: 50%;
      background-color: inherit;
      outline: 1px rgba(255, 255, 255, 0.2) solid;
      transform: translate(-50%, -50%);
 }
 input[type='checkbox']:checked:before {     
      content: '';
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 50%;
      left: 50%;
      background-color: inherit;
      outline: 1px rgba(255, 255, 255, 0.2) solid;
      transform: translate(-50%, -50%);
      box-shadow: 0px 0px 4px 1px #fff;
 }
 input[type='checkbox']:checked:after {
      content: '';
      display: block;
      width: 6px;
      height: 10px;
      border: solid;
      border-width: 0 2px 2px 0;
      border-color: inherit;
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
 }

结果：

Answer 13

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