CSS 自定义单选按钮在 IE 8 中不起作用答案

【问题标题】：CSS Custom radio button not working in IE 8CSS 自定义单选按钮在 IE 8 中不起作用
【发布时间】：2014-02-21 02:16:23
【问题描述】：

我使用以下代码生成自定义单选按钮。

HTML

<div class="mealPlanContainer remove-padding">
    <input id="mp_${mp.hotelMealPlanId}" name="mealPlan" type="radio" value="${mp.hotelMealPlanId}" class="css-checkbox">
    <label for="mp_${mp.hotelMealPlanId}" class="css-label">${mp.mealPlanDescription}</label>
</div>

CSS

.advance-search-row input[type=radio]{
    margin-top: -4px;
    margin-right: 12px;
    display: none;
}
.advance-search-row span{
    font-size: 15px;
    font-family: 'sagoe-ui-light';
    color: #FFF;
}
.advance-search-row input[type=radio].css-checkbox {
    display:none;
}
.advance-search-row input[type=radio].css-checkbox + label.css-label {
    padding-left:24px;
    height:19px; 
    display:inline-block;
    line-height:19px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:14px;
    vertical-align:middle;
    cursor:pointer;
}
.advance-search-row input[type=radio].css-checkbox:checked + label.css-label {
    background-position: 0 -19px;
}
.advance-search-row label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_353a617ca21d6630433b397442362d96.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

这在 IE 9 以上版本中运行良好，但在 IE 8 中不适用。我认为问题在于用于更改背景位置的选择器。关于如何使其在 IE 8 中工作的任何想法。

【问题讨论】：

标签： javascript jquery html css internet-explorer

【解决方案1】：

我第一眼看到的最明显的东西是:checked。 IE8 不支持此选择器。

如果没有 :checked 选择器，您的 CSS 将无法工作，那么它在 IE8 中将无法工作。

我能提供的最佳解决方案是使用像 Selectivizr 这样的 polyfill 脚本来为旧 IE 版本添加对这个选择器的支持。

【讨论】：

当我使用提供的脚本时，我什至看不到以前没问题的自定义图标！
请注意，Selectivizr 需要另一个库（例如 jQuery）才能工作。如果您没有合适的合作伙伴库（网站上显示了合适的库列表），那么您需要获得其中一个，或者使用不同的 polyfill 解决方案。
我使用 NWMatcher 作为库，但问题仍然存在！它在 IE 8 上。
我没有使用过这个组合，所以我无法评论。但是 Selectivizr 确实有效。我已经看到它在行动。 ie9.js 也可以。当你说它对你不起作用时，我相信你，但我真的无法提供任何解释。我所能建议的就是尝试替代解决方案（ie9.js，或者最坏的情况，您的自定义收音机在 javascript 而不是 css 中实现起来相当简单）。如果您想继续尝试使用 selectivizr，可以提出一个新问题，详细说明问题所在。

【解决方案2】：

IE 中存在一个错误/故障/问题，即标签元素在“不可见”（display: none; 或visibility: hidden;）时无法触发复选框或单选按钮。解决方法是使用一些样式，使其在技术上可见，但实际上并不可见。将不透明度设置为 0 并将位置设置为绝对就可以了。

如果您只有 IE 8 及更早版本的样式表，请将以下块添加到其中：

.advance-search-row input.css-checkbox {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    position: absolute;
    display: block!important;
    left: -999em;
}

【讨论】：

要检查的一件事是，当您单击标签时，单选按钮的“已选中”状态是否发生了变化——也就是说，这只是视觉问题，还是表单行为问题？

【解决方案3】：

只需使用 .mealPlanContainer input[checked] + label { //你的样式在这里 } 这适用于 IE8。

body { padding: 2em; }

input + label {
  color: red;
}

input[checked] + label {
  color: green;
}

<input type="radio" id="rad" checked />
<label for="rad">What colour am I?</label>

【讨论】：