Question

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

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中工作的任何想法。

Answer 1

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

如果你的CSS在没有:checked选择器的情况下无效，那么它将无法在IE8中运行。

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

Answer 2

IE中存在一个错误/故障/事物，如果标签元素“不可见”（display: none;或visibility: hidden;），则无法触发复选框或单选按钮。解决方法是使用一些样式，以便它在技术上可见，但不是真的可见。将不透明度设置为0并将位置设置为绝对可以达到目的。

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

.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; }

Answer 3

只需使用.mealPlanContainer输入[选中] +标签{//您的造型在这里} 这适用于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>

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

3 个答案: