解決ios使用偽元素content:‘\2714’自定義radio樣式無效


<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的問題就解決了,只不過選中的鈎跟之前的有點不一樣,稍微小一點,我看起來這個鈎更立體了

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM