CSS自定義單選按鈕不起作用在IE 8中

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中工作。

來源

2014-01-29 Imesh Chandrasiri

看看餡餅CSS。 – Jai

我第一眼看到的最明顯的事情是:checked。該選擇器在IE8中不受支持。

如果沒有:checked選擇器，您的CSS將無法正常工作，那麼它將無法在IE8中工作。

我可以提供的最佳解決方案是使用像Selectivizr這樣的填充腳本來爲此選擇器添加對舊IE版本的支持。

來源

2014-01-29 10:36:56 Spudley

當我使用提供的腳本時，我甚至無法看到以前沒有的自定義圖標！ –

請注意，Selectivizr需要另一個庫（例如jQuery）才能工作。如果您沒有合適的合作伙伴庫（網站上顯示了合適的庫的列表），那麼您需要獲取其中的一個，或者使用不同的聚合填充解決方案。 – Spudley

另一種填充建議：[ie9.js]（https://code.google.com/p/ie7-js/） – Spudley

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

來源

2014-01-29 10:44:25 Beejamin

這不起作用！我嘗試過這個！ –

需要檢查的一件事情是單擊標籤時單選按鈕的「已檢查」狀態是否發生變化 - 也就是說，它只是一個視覺問題還是表單行爲問題？ – Beejamin

只需使用.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>

來源

2014-10-03 01:37:04 davidelrizzo

CSS自定義單選按鈕不起作用在IE 8中

回答

相關問題