[英]CSS :before not working in IE11
I'm replacing traditional radio buttons with icons from FontAwesome.我正在用 FontAwesome 的图标替换传统的单选按钮。 Everything works great in Chrome and Firefox, but IE11 is having issues - the icons I'm replacing the radio buttons with do not show up at all.
在 Chrome 和 Firefox 中一切正常,但 IE11 有问题 - 我正在替换单选按钮的图标根本不显示。
Edit with working Fiddle: https://jsfiddle.net/sow1a04m/使用工作小提琴进行编辑: https : //jsfiddle.net/sow1a04m/
Example in Chrome: Chrome 中的示例:
Example in IE11: IE11 中的示例:
Here's my HTML:这是我的 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>
And here's my CSS:这是我的 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";
}
I'm thinking it may have something to do with the visibility
settings I've applied, but I haven't been able to figure it out on my own.我认为这可能与我应用的
visibility
设置有关,但我自己无法弄清楚。
The problem is using pseudo element on an input element, it does not work in ia IE, use a label as target instead ... and it actually shouldn't work in Chrome (or any other browser) either, as a pseudo element is not supposed to work on single tag elements.问题是在输入元素上使用伪元素,它在 ia IE 中不起作用,而是使用标签作为目标......它实际上也不应该在 Chrome(或任何其他浏览器)中工作,因为伪元素是不应该在单个标签元素上工作。
I changed this rule to show how you could do, so you'll see it now works with FontAwesome我改变了这个规则来展示你可以怎么做,所以你会看到它现在可以与 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;
}
Also note, for the input:checked
to work (target its label
) you can't have the input
wrapped inside the label
, it must be positioned before the label
in the markup, like this:另请注意,
input:checked
工作(定位其label
),您不能将input
包裹在label
,它必须位于label
中的label
之前,如下所示:
<input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" />
<label for="radio-group-1-Y"></label>
You cannot reliably style checkbox and radio inputs across browsers and operating systems.您无法跨浏览器和操作系统可靠地设置复选框和单选输入的样式。 This is not a problem specific to IE.
这不是 IE 特有的问题。 It is an operating system control.
它是一个操作系统控件。 Use CSS to target the input label and hide the checkbox instead.
使用 CSS 定位输入标签并隐藏复选框。
HTML HTML
<input type="checkbox" id="checkbox">
<label for="checkbox"></label>
CSS CSS
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
background-image: /* whatever */
}
input[type="checkbox"]:checked + label {
background-image: /* whatever */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.