CSS自定義複選框，並定製單選框

input[type=radio]:checked + label:before { 
    content: "\2022"; 
    color: #AD7471; 
    font-size: 35px; 
    text-align: center; 
    line-height: 16px; 
} 

input[type=checkbox]:checked + label:before { 
    content: "\2713"; 
    font-size: 17px; 
    font-weight:bold; 
    color: #AD7471; 
    text-align: center; 
    line-height: 100%; 
}

的問題是，單選框內的點和蜱的複選框內是不是垂直對齊的中心，它可以在桌面上正常工作，但在移動設備上，它會下降，

花了一些時間，並懷疑它是由於行高，它不穩定，找不到一個數字適用於所有情況

如何解決？提供jsfiddle，隨時隨地玩。

感謝

來源

2016-06-10 user782104

'線height' =='height' ... https://jsfiddle.net/Lqfty04x/1/ – DaniP

試好。但複選框不是veritcal對齊中心。此外，單選按鈕的點似乎不是水平對齊（略右）。你會介意看看 – user782104

https://jsfiddle.net/Lqfty04x/2/ ...只是改變複選框的行高，「似乎」錯過了，但它的中心 – DaniP

我會建議使用Web字體圖標，如字體真棒超過標準Unicode字符，所以它給你在不同的瀏覽器和設備一致的結果。

label { 
 
    display: inline-block; 
 
    margin: 8px 4px; 
 
} 
 
input[type="radio"], 
 
input[type="checkbox"] { 
 
    display: none; 
 
} 
 
input[type="radio"] + span:before, 
 
input[type="checkbox"] + span:before { 
 
    font-family: "FontAwesome"; 
 
    font-size: 16px; 
 
    display: inline-block; 
 
    width: 18px; 
 
} 
 
input[type="radio"] + span:before { 
 
    content: "\f1db"; 
 
} 
 
input[type="radio"]:checked + span:before { 
 
    content: "\f192"; 
 
} 
 
input[type="checkbox"] + span:before { 
 
    content: "\f096"; 
 
} 
 
input[type="checkbox"]:checked + span:before { 
 
    content: "\f046"; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<label> 
 
    <input type="radio" name="test" checked> <span>Radio 1</span> 
 
</label> 
 

 
<label> 
 
    <input type="radio" name="test"> <span>Radio 2</span> 
 
</label> 
 

 
<label> 
 
    <input type="checkbox" name="test" checked> <span>Checkbox 1</span> 
 
</label> 
 

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

來源

2016-06-10 16:55:14 Stickers

CSS自定義複選框，並定製單選框

回答

相關問題