2

编辑：不敢相信我忘了指定，这个问题是在 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;
}

这样做是隐藏默认复选框并创建一个新复选框作为标签之前的 :before（显示在 ie8 中）。单击标签时，将在复选框输入标签上附加一个类.checked，然后应:after显示复选标记背景图像。我也尝试在标签内使用 span 以获得相同的效果，但似乎没有任何效果。这些类已正确附加，但 :after 复选标记从未出现。

有什么想法吗？

4

2 回答 2

0

类被追加或替换？如果你改变会发生什么

.checkbox.checked + label:after {

至

.checked + label:after {
于 2013-09-20T15:21:11.427 回答
0

我有另一个工作示例here。
（在 Google Chrome、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%;
}
于 2013-09-20T16:15:32.270 回答