解决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的问题就解决了,只不过选中的钩跟之前的有点不一样,稍微小一点,我看起来这个钩更立体了

 

 

 

posted @ 2020-03-19 11:22  文文iou  阅读(1178)  评论(0编辑  收藏  举报