CSS定製的複選框不是IE9

另一個複選框內顯示我使用這個CSS代碼生成複選框列表：CSS定製的複選框不是IE9

.regularCheckbox 
{ 
-webkit-appearance: none; /* WebKit */ 
-moz-appearance: none; /* Mozilla */ 
-o-appearance: none; /* Opera */ 
-ms-appearance: none; /* Internet Explorer */ 
-webkit-appearance: none; 
    background-color: #fafafa; 
    border: 1px solid #cacece; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); 
    padding: 9px; 
    border-radius: 3px; 
    display: inline-block; 
    position: relative; 
    vertical-align: middle; 
}

的問題是，在IE瀏覽器的標準複選框我創建了一個內顯示。

http://jsfiddle.net/Naqmj/

我怎麼能解決這個問題？

謝謝！

來源

2013-05-30 samyb8

不要你需要一個'-MS-箱shadow'爲即？ – karthikr

您正在測試哪個IE版本？請在提問IE問題時指定，因爲它有很大的不同。 – Spudley

@karthikr - 不，你沒有; IE9/10可以接受前置「box-shadow」。但是他確實需要至少提供前綴版本...... IE *絕對不會選擇'-moz-'或'-webkit-'版本。 – Spudley

嘗試使用Javascript解決方案。我設置了一個jsFiddle例子來使用JS。這將跨瀏覽器工作。 IE你沒有訪問ms外觀。沒有一個我不認爲。以下是示例jsfiddle.net/JgJaU。是的，它很多，但如果你想跨瀏覽器兼容性，這是它所需要的。

我也找到了這個例子。看起來很有前途，但它使用了精靈圖像。 http://csscheckbox.com/。僅限CSS的複選框。

唯一有這個的是比IE9低的任何東西都會打破。所以Javascript解決方案將是你最好的選擇。

是這樣的：

input[type=checkbox].css-checkbox {display:none;} 

input[type=checkbox].css-checkbox + label.css-label { 
         padding-left:20px; 
         height:15px; 
         display:inline-block; 
         line-height:15px; 
         background-repeat:no-repeat; 
         background-position: 0 0; 
         font-size:15px; 
         vertical-align:middle; 
         cursor:pointer; 
        } 

input[type=checkbox].css-checkbox:checked + label.css-label { 
         background-position: 0 -15px; 
        } 

        .css-label{ 
         background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png); 
        }

HTML：

<input id="demo_box_1" class="css-checkbox" type="checkbox" /> 
       <label for="demo_box_1" name="demo_lbl_1" class="css-label">Option #1</label> 
       <!-- Checkbox powered by CssCheckbox.com --> 

       <input id="demo_box_2" class="css-checkbox" type="checkbox" checked="checked" /> 
       <label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label> 
       <!-- Checkbox powered by CssCheckbox.com --> 

       <input id="demo_box_3" class="css-checkbox" type="checkbox" /> 
       <label for="demo_box_3" name="demo_lbl_3" class="css-label">Option #3</label> 
       <!-- Checkbox powered by CssCheckbox.com -->

來源

2013-06-04 22:38:23 ClosDesign

CSS定製的複選框不是IE9

回答

相關問題