在Chrome中使复选框看起来像IE中的一样 [英] Make checkbox in chrome look like one in IE
本文介绍了在Chrome中使复选框看起来像IE中的一样的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
IE和Chrome中的复选框外观不同。
Chrome
IE
从上面的图片可以看到差异。我想在Chrome中的复选框看起来和IE一样。
我试过 webkit-box-shadow 和其他类似的css属性,但没有运气。
解决方案
一个很简单的方法只是添加 webkit-appearance:none;
。但是,您将需要然后样式复选框以匹配您想要的。以下是一个示例:
http://jsfiddle.net/ tzdcbyc5 /
< input class =checkboxtype =checkbox>
< input class =checkboxtype =checkboxchecked>
.checkbox {
position:relative;
width:14px;
height:14px;
border:1px solid#111;
background:#fff;
-webkit-appearance:none;
appearance:none;
}
.checkbox:checked {
background:url(http://vignette3.wikia.nocookie.net/roblox/images/5/57/Very-Basic- Checkmark-icon.png / revision / latest?cb = 20131125154354)no-repeat center center;
background-size:100%;
}
The checkbox in IE and chrome looks different.
Chrome
IE
From above images you can see the difference. I want checkbox in chrome looks same as in IE.
I tried webkit-box-shadow and other similar css properties but no luck. Can you please suggest how this can be achieved.
解决方案
A really simple way is just to add -webkit-appearance: none;
. But you will need to then style the checkbox to match what you want. Here is an example:
<input class="checkbox" type="checkbox">
<input class="checkbox" type="checkbox" checked>
.checkbox {
position: relative;
width: 14px;
height: 14px;
border: 1px solid #111;
background: #fff;
-webkit-appearance: none;
appearance: none;
}
.checkbox:checked {
background: url(http://vignette3.wikia.nocookie.net/roblox/images/5/57/Very-Basic-Checkmark-icon.png/revision/latest?cb=20131125154354) no-repeat center center;
background-size: 100%;
}
这篇关于在Chrome中使复选框看起来像IE中的一样的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文