CSS：在 IE11 不工作之前

Question

我正在用 FontAwesome 的图标替换传统的单选按钮。在 Chrome 和 Firefox 中一切正常，但 IE11 出现问题 - 我用来替换单选按钮的图标根本不显示。

使用 Fiddle 进行编辑： https://jsfiddle.net/sow1a04m/

Chrome 中的示例：

IE11 中的示例：

这是我的 HTML：

<tr>
    <td class="vert-align">Valid Signed and dated delivery ticket in patient's record.</td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" />
        </label>
    </td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-N" value="N" />
        </label>
    </td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-NA" value="NA" />
        </label>
    </td>
</tr>

这是我的 CSS：

#dlg-audit-intake-compliance-checklist input[type=radio] {
    visibility: hidden;
}

#dlg-audit-intake-compliance-checklist input[type=radio]:hover {
    cursor: pointer;
}

#dlg-audit-intake-compliance-checklist input[type=radio]:before {
    visibility: visible;
    font-family: FontAwesome;
    content: "\f10c";
    font-size: 25px;
    text-shadow: 1px 1px 0px #ddd;
    margin-bottom: 10px !important;
}

#dlg-audit-intake-compliance-checklist input[value=Y]:checked:before {
    color: #009C15;
    content: "\f00c";
}

#dlg-audit-intake-compliance-checklist input[value=N]:checked:before {
    color: #AD0000;
    content: "\f00d";
}

#dlg-audit-intake-compliance-checklist input[value=NA]:checked:before {
    color: #F7D200;
    content: "\f05e";
}

我认为这可能与我应用的 visibility 设置有关，但我自己无法弄清楚。

Answer 1

问题是在输入元素上使用伪元素，它在 i.a. 中不起作用。 IE，使用标签作为目标......它实际上也不应该在 Chrome（或任何其他浏览器）中工作，因为伪元素不应该在单个标签元素上工作。

我改变了这条规则来展示你可以怎么做，所以你会看到它现在可以与 FontAwesome 一起使用

#dlg-audit-intake-compliance-checklist label:before {
    font-family: FontAwesome;
    content: "\f10c";
    font-size: 25px;
    text-shadow: 1px 1px 0px #ddd;
    margin-bottom: 10px !important;
}

还请注意，要使 input:checked 工作（以 label 为目标），您不能将 input 包裹在 label 中，它必须位于 label 之前标记，像这样：

<input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" />
<label for="radio-group-1-Y"></label>

Answer 2

您无法跨浏览器和操作系统可靠地设置复选框和单选输入的样式。这不是 IE 特有的问题。它是一个操作系统控件。使用 CSS 来定位输入标签并隐藏复选框。

HTML

<input type="checkbox" id="checkbox">
<label for="checkbox"></label>

CSS

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

input[type="checkbox"] + label {
  background-image: /* whatever */
}

input[type="checkbox"]:checked + label {
  background-image: /* whatever */
}