CSS隱藏輸入複選框在Internet Explorer

我有以下HTML輸入：CSS隱藏輸入複選框在Internet Explorer

<label class="selectit"> 
    <input value="women_shoulder_bags" type="checkbox" id="in-women-15797">Shoulder Bags 
</label>

我也有下面的CSS：

.selectit input { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -o-appearance: none; 
}

這個工作在Safari，Chrome和所有其他人。但在Internet Explorer 8中，複選框仍然顯示。我的問題是，如何使用CSS隱藏Internet Explorer 8中的輸入複選框？

謝謝

來源

2014-04-02 user2028856

'顯示：none'似乎做工精細.. [小提琴]（http://jsfiddle.net/KJ2cC/）。 –

問題是，我使用jquery在單擊時將輸入的背景更改爲選中的標記。因此，如果我將其設置爲不顯示任何內容，則單擊時背景也不會顯示爲 – user2028856

'不透明度：0' /'visibility：hidden'？ –

爲什麼不把它隱藏在每個瀏覽器？或者是否有它應該在Opera中顯示的原因？你可以嘗試：

.selectit input { 
    display: none; 
}

來源

2014-04-02 08:05:35 kampfkuchen

事情是，我使用jquery在單擊時將輸入的背景更改爲選中的標記。因此，如果我將其設置爲不顯示任何內容，則單擊時背景也不會顯示爲 – user2028856

或者，我可以更改輸入複選框的背景顏色（如果可能的話），您知道我該怎麼做？ – user2028856

如果您使用display：none，您無法在字段上標籤，並且可能會「迷惑」某些屏幕閱讀器。 –

嘗試：

.selectit input { 
    width: 0px; /* or right: 100%; */ 
    position: absolute; 
}

來源

2014-04-02 08:39:37

margin-left：-20px無法爲我工作，因爲這樣做也隱藏了選中標記背景圖像與複選框位於同一位置。我沒有嘗試寬度：0px在IE中，但在Chrome中，我仍然看到默認複選框，只是稍微小點 – user2028856

請看這裏http://jsfiddle.net/KJ2cC/複選框仍然可見 – user2028856

@ user2028856我看不到複選框.. –

爲了實現這一目標的IE10 +，你可以使用::-ms-check與display:none https://msdn.microsoft.com/en-us/library/hh771816(v=vs.85).aspx

input::-ms-check{ 
    display:none 
}

更新：對於IE8，IE9

你可以使用相同的技術在這個答案https://stackoverflow.com/a/23777214/2253257

input::-ms-check { 
     /* IE 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
     /* IE 5-7 */ 
     filter: alpha(opacity=0); 
     /* Good browsers :) */ 
     opacity:0; 
    }

來源

2015-11-10 08:18:15

CSS隱藏輸入複選框在Internet Explorer

回答

相關問題