AUBREY

SOMETIMES LOVE JUST AIN'T ENOUGH

混合开发APP:在IOS上给伪元素content: ‘\2714’修改样式无效

<input type=”radio” />元素在Chrome上的效果,如下:

 

实现代码如下:

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;
  color: #fff;
  -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\fe0e';
  color: #fff!important;
  border: 1px solid @mainColor;
  font-size: 0.186rem;
}

 

Android上显示也正常,但是在IOS上,中间的勾是灰黑色的,如下:

 

解决方法:

百度了半天,没结果,FQ了,查到的。原文链接:

https://stackoverflow.com/questions/39514315/safari-on-iphone-is-unable-to-style-the-color-of-pseudo-element-after-with-cont/39708945

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注