使複選框在Chrome中看起來像IE中的一個

Question

IE和chrome中的複選框看起來不同。

鉻

IE

從上面圖片可以看到其中的差別。我想在Chrome瀏覽器中的複選框看起來與IE中相同。

我試過webkit-box-shadow和其他類似的CSS屬性，但沒有運氣。你能否建議如何實現這一點。

Answer 1

一個非常簡單的辦法就是添加-webkit-appearance: none;。但是你需要設置複選框的樣式來匹配你想要的。這裏有一個例子：

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%; 
} 

Answer 2

這是否符合您的需求？ http://codepen.io/anon/pen/dovdWv

基本上，我用-webkit-appearance: inherit;重置複選框爲初始狀態，並使用:after僞元素來創建您的複選標記。

僅在Chrome上進行測試。

Answer 3

這可以統一它跨瀏覽器和操作系統，我認爲。

input[type="checkbox"] { 
 
    display: none; 
 
} 
 
input[type="checkbox"] + span:before { 
 
    content: "\2610"; 
 
    font-size: 1.25em; 
 
} 
 
input[type="checkbox"]:checked + span:before { 
 
    content: "\2611"; 
 
}

<label> 
 
    <input name="test" type="checkbox"/> 
 
    <span>Item</span> 
 
</label>

Answer 4

IE和谷歌Chrome瀏覽器的不同渲染引擎（排版引擎）。 webkit-box-shadow在谷歌瀏覽器和最新的Safari中使用webkit佈局引擎。

.squaredFour { 
    width: 18px; 
    position: relative; 
    margin: 18px auto; 
} 
.squaredFour label { 
    width: 18px; 
    height: 18px; 
    cursor: pointer; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #fcfff4; 
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    border-radius: 4px; 
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5); 
} 
.squaredFour label:after { 
    content: ''; 
    width: 8px; 
    height: 4px; 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    border: 3px solid #333; 
    border-top: none; 
    border-right: none; 
    background: transparent; 
    opacity: 0; 
    -webkit-transform: rotate(-45deg); 
     -ms-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
} 
.squaredFour label:hover::after { 
    opacity: 0.5; 
} 
.squaredFour input[type=checkbox] { 
    visibility: hidden; 
} 
.squaredFour input[type=checkbox]:checked + label:after { 
    opacity: 1; 
} 



<section title=".squaredFour"> 
    <div class="squaredFour"> 
     <input type="checkbox" value="None" id="squaredFour" name="check" checked /> 
     <label for="squaredFour"></label> 
    </div> 
</section> 

http://jsbin.com/saxunaqiqi/1/edit

這將在谷歌Chrome和IE瀏覽器10+工作。