在Chrome中使复选框看起来像IE中的一样 [英] Make checkbox in chrome look like one in 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:

http://jsfiddle.net/tzdcbyc5/

<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屋！