<input type="radio">給了自定義樣式之后在google瀏覽器上的效果:
css樣式如下
input[type=radio] { content: ''; width: 0.4rem; height: 0.4rem; line-height: 0.4rem; vertical-align:middle; margin-top: 0; -webkit-appearance: none; } input[type="radio"]::before, input[type="radio"]:checked::before { content: ''; width: 0.4rem; height: 0.4rem; line-height: 0.4rem; text-align: center; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } input[type="radio"]::before { background: #fff; border: 1px solid #EFEFEF; } input[type="radio"]:checked::before { background-color: @mainColor; content: '\2714'; color: #fff; border: 1px solid @mainColor; font-size: 0.186rem; }
但是ios上的選擇后的鈎是黑色的,無效果,如下圖
國外的朋友是這樣解釋的,iPhone上的Safari在使用content \2714之后無法設置偽元素的顏色,但是它適用於\2713;
這里需要在選中標記后直接添加一個U+FE0E變量選擇器-15來告訴iOS把它畫成一個大綱而不是位圖。
改完后ios的問題就解決了,只不過選中的鈎跟之前的有點不一樣,稍微小一點,我看起來這個鈎更立體了