CSS：如何在标签后设置复选框样式？答案

【问题标题】：CSS: How to style checkbox after label?CSS：如何在标签后设置复选框样式？
【发布时间】：2015-11-26 21:40:09
【问题描述】：

我有这个无法更改的 HTML：

<label for="accept">I accept.</label>
<input id="accept" type="checkbox">

现在，我必须使用 CSS 将复选框移到左侧并使用自定义图像设置样式。我通常在 CSS 中做的事情是，当输入在标签之前时，让标签像复选框一样隐藏实际输入：

input[ type=checkbox ] {
  display:none;
  }

input[ type=checkbox ] + label {
  display:inline-block;
  padding-left: 25px;
  cursor: pointer;
  height: 25px;
  background: url('image.png') 0 -5px no-repeat;
}

input[ type=checkbox ]:checked + label {
  background: url('image.png') 0 -40px no-repeat;
}

但是，在这种情况下，当我尝试时：

    input[ type=checkbox ] {
      display:none;
      }

    label + input[ type=checkbox ] {
      display:inline-block;
      padding-left: 25px;
      cursor: pointer;
      height: 25px;
      background: url('image.png') 0 -5px no-repeat;
    }

    label + input[ type=checkbox ]:checked {
      background: url('image.png') 0 -40px no-repeat;
    }

不仅不显示背景，甚至取消隐藏复选框，所以我最终在标签后添加了默认复选框。

如何在不使用 JavaScript 的情况下执行此操作？

【问题讨论】：

仅供参考：在您的第一个代码示例中，您正在设置 LABEL 元素而不是复选框的样式。 CSS 选择器从右到左读取。
感谢您的快速回复。是的，我知道。重点是设置标签的样式并将背景添加到它的左侧，因此它看起来和行为就像一个复选框
这些元素是否在另一个元素中？
它们是，但我不能直接设置它们的样式，因为有一大堆具有相同 id (p.form-row) 的元素，并且它们的数量会因为添加或删除某些字段而发生变化取决于用户输入。
在这种情况下，纯css是不可能的（跨浏览器），你要么需要使用js绑定一个change事件，要么交换dom中元素的顺序

标签： css checkbox

【解决方案1】：

由于CSS selectors are read from right to left，无法像您在第二个代码示例中尝试的那样使用 CSS 同级选择器来定位标签元素。

你可以做的是使用伪元素，并使用绝对定位隐藏输入元素：

input { 
    position: absolute;
    left: -999em;                /* asuming direction: ltr */
}

input:before { 
    margin-left: 999em;
    float: left;
    content: "";

    /* styles for visual demo */
    height: 25px;
    width: 25px;
    margin-top: -4px;
    background: #ddd;
    border: 1px solid #000;
}

input:checked:before {
    background: #0f0;
}

label { 
    display: inline; 
    padding-left: 35px; 
    line-height: 27px; 
}

Working example on JSFiddle

让这项工作跨浏览器有点棘手，因为并非所有浏览器都允许在输入中使用伪元素（根据规范，它是correct to not allow it），但可以在支持它的浏览器中完成。

提醒：在这种情况下，总是尝试先更改 HTML 或 要求设计妥协（即询问是否可以使复选框位于右侧而不是左侧）。 CSS 在边缘上是非常讨厌的，并且不应该总是因为这种可能性而成为解决方案。

【讨论】：

是的，谢谢，我已经做到了。几分钟前有人留下了答案并将其删除（也许是你？）：jsfiddle.net/yv5uaaLz 它帮助我得出了相同的结论。我不敢相信我以前没有想到，这太明显了。无论如何，谢谢你的帮助:)
不，不是我 - 可能有人写了它，看到我以某种方式回答。如果对您有帮助，请将答案标记为解决方案。
@shebara，我删除了我的答案，因为由于 html 规范，它只能在 chrome 中工作（但将来可能不会） - 输入不能有子元素，所以之前和之后的伪元素在浏览器中不起作用符合标准（chrome 目前不符合）
谢谢@Pete，我用该信息升级了我的答案，并进一步解释了尝试更改 HTML 或要求正确输入是明智的。

【解决方案2】：

您可以使用 css 自定义默认 html 复选框。请看看我的小提琴。 Custom Checkbox Sample

.customCheckBoxDiv {
  position: relative;
  float: left;
}
.customCheckBoxDiv span {
  margin-left: 25px;
  color: #0066cc;
}
.loginCheckBox {
  opacity: 0;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}
.checkLabel {
  width: 13px;
  height: 13px;
  border: 1px solid #00cc00;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 3px;
}
.loginCheckBox:checked + label {
  border: 1px solid #00cc00 !important;
  background: #00cc00 !important;
  box-shadow: inset -2px 0px 0px 0px #fff, inset 2px 0px 0px 0px #fff, inset 0px -2px 0px 0px #fff, inset 0px 2px 0px 0px #fff !important;
}

<div class="customCheckBoxDiv">
  <input type="checkbox" value="None" class="loginCheckBox" name="check" checked />
  <label class="checkLabel"></label> <span>Remember Me</span>

</div>

【讨论】：