Question

编辑：不敢相信我忘了指定，这个问题出现在IE8中

我有一个表格，其中包含一系列复选框，如下所示：

HTML：

<input type="checkbox" class="checkbox" name="fields" id="Anesthesiology" /><label for="Anesthesiology">Anesthesiology</label>

CSS：

.checkbox {
  display: none;
}
.checkbox + label {
  position: relative;
  display: block;
  padding-left: 25px;
  margin: 16px 0 0;
  font: 13px/16px 'Trebuchet MS', Arial, sans-serif;
  color: #656565;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.checkbox + label:before {
  content:" ";
  display: block;
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #d1d1d1;
}

.checkbox.checked + label:after {
  content:" ";
  display: block;
  width: 16px;
  height: 17px;
  background-image: url(../images/checkmark.png);
  position: absolute;
  top: -3px;
  left: 2px;
}

这样做是隐藏默认复选框并创建一个新的复选框：标签之前（在ie8中显示）。单击标签后，会在复选框输入标记中附加一类.checked，然后应显示:after复选标记背景图像。我也尝试在标签内部使用span来获得相同的效果，但似乎没有任何效果。这些类正在被正确添加，但是：在复选标记之后永远不会显示。

有什么想法吗？

Answer 1

该课程正在追加或替换？如果你改变

会发生什么

.checkbox.checked + label:after {

到

.checked + label:after {

Answer 2

我有 a 另一个工作示例 here 。
（经过测试，可在谷歌浏览器，Mozilla Firefox，Safari，IE10和IE8中使用）

HTML：

<input type="checkbox" name="Anesthesiology_1" value="true" class="AnesthesiologyCheckbox" id="Anesthesiology_1">
<label for="Anesthesiology_1" class="AnesthesiologyLabel">Anesthesiology</label>

CSS：

.AnesthesiologyCheckbox {
    display: block;
    margin: 0px;
    padding: 0px;
    height: 0px;
    width: 0px;
    font-size: 1px;
    line-height: 0px;

    -moz-appearance: none;
    position:relative;
    left:-100%;
}

CSS：图像未显示 - IE8

2 个答案: