復位輸入樣式複選框在IE

默認我有這樣的輸入CSS規則：復位輸入樣式複選框在IE

input { 
    border: 1px solid black; 
}

的問題是，在IE瀏覽器複選框（對IE 8進行測試和9）和Opera也繼承了這個邊境而不是顯示默認的樣式，他們展示自己的自定義模式與白色背景和黑色的檢查這樣的複選框：在Windows 7

custom checkbox

，而不是本地的樣式，像漸變灰色背景和深藍色檢查是在Chrome和Firefox所示：

default checkbox

我想保持在CSS中輸入規則的邊界，但我已經稱爲類「複選框，」我穿上這樣所有複選框：

<input type="checkbox" class="checkbox" />

有沒有什麼辦法可以用.checkbox規則重置邊框樣式？

我曾嘗試：

.checkbox { 
    border: none; 
}

這在歌劇作品，以恢復到默認的風格，但不是在IE瀏覽器。我也嘗試了很多不同的組合：

.checkbox { 
    border: 1 none transparent; 
}

但這些似乎都沒有重置爲IE中複選框的默認樣式。

是否有可能恢復IE中的複選框的默認樣式而不刪除輸入規則的邊框，而是使用.checkbox類？

來源

2011-03-18 alexteg

在許多瀏覽器中，無法將複選框重置爲默認原生樣式。

這可能是爲什麼CSS通常重置不包括規則，這種效果的原因：

input { 
    border: 0; 
}

最兼容的技術是可以做到：

input[type="text"], input[type="password"] { 
    border: 1px solid black; 
}

，並明確列出每個typeinput你想要的風格。

參見：http://jsfiddle.net/EPpJ9/

這將在IE7 +和所有現代瀏覽器。

您也可以與not() CSS3僞類做到這一點更加整齊，但這並不在IE8，這對我來說是一個大忌工作：

input:not([type="checkbox"]) { 
    border: 1px solid black; 
}

來源

2011-03-18 14:21:04 thirtydot

嗯，我幾乎期待從IE瀏覽器，但謝謝你的答案。如果沒有其他人有更好的解決方案，我會接受。 – alexteg 2011-03-18 14:35:33

我必須支持IE6，所以這是一個問題。 – 2012-08-30 01:01:42

我不是'：not（）'僞選擇器的粉絲，儘管它很有幫助。它具有非常高的特異性，並且如果需要，以後很難重寫。只是我的兩分錢。 – EHorodyski 2014-02-24 13:21:39

你不能包括ie8- js讓IE8認識not（）CSS3僞類？

http://code.google.com/p/ie7-js/

<!--[if lt IE 9]> 
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> 
<![endif]-->

來源

2011-11-29 21:21:27 Danger14

如果你還在疑惑的確有辦法樣式複選框，並把它在大多數瀏覽器包括IE工作。你只需要一些CSS和只是一個小小的JavaScript和jQuery。在IE6中工作+

首先使您的複選框像這樣..只添加一個標籤元素與for元素指向複選框的ID。

<input id="mycheckbox" type="checkbox"> 
<label id="mylabel" for="mycheckbox"></label>

下一頁包括一些CSS：

#mycheckbox { 
    display: none; 
}

使用標籤控件畫出你的複選框，這裏是一個我做：

#mylabel { 
    float: left; 
    margin-top: 11px; 
    background-color: #fff; 
    border: 1px solid #000; 
    display: block; 
    height: 12px; 
    width: 12px; 
    margin-right: 10px; 
    -webkit-border-top-right-radius: 20px; 
    -webkit-border-bottom-right-radius: 20px; 
    -moz-border-radius-topright: 20px; 
    -moz-border-radius-bottomright: 20px; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px; 
    background-position: left center; 
}

你必須建立一個場景的時候箱檢查：

#mylabel.checked { 
background-color: #808080; 
}

最後一些jQuery的：

$(document).ready(function() { 
    $("#mycheckbox").change(function() { 
     if ($("#mycheckbox").is(":checked")) { 
     $("#mylabel").addClass("checked", "checked"); 
    } else { 
     $("#mylabel").removeClass("checked"); 
    }}) 
    });

不要忘了，包括了jQuery庫（把這個在你的頭標記）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

退房小提琴看到它在行動： fiddle

來源

2014-02-20 02:13:48 user2410570

復位輸入樣式複選框在IE

回答

相關問題