Question

我有这个我无法改变的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的情况下执行此操作？

Answer 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在边缘是非常讨厌的，并且不应该仅仅因为可能性而成为解决方案。

Answer 2

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

2 个答案: