复位输入样式复选框在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

回答

相关问题