CSS 伪类修改input选中样式

 主要是用到了after伪类和字体符号。 1 input{ 2 -webkit-appearance: none; 3 -moz-appearance: none; 4 appearance: none; 5 display: inline-block; 6 } 7...

 主要是用到了after伪类和字体符号。

 1 input{
 2     -webkit-appearance: none;
 3     -moz-appearance: none;
 4     appearance: none;
 5     display: inline-block;
 6 }
 7 input:after{
 8     content: "";
 9     font-size: 18px;
10     display: inline-block;
11     width: 14px;
12     height: 14px;
13     line-height: 14px;
14     text-align: center;
15     border: 1px solid #666fff;
16     vertical-align: bottom;
17 }
18 input:checked:after{
19     content: "2714";
20 }
1 <label for="gender-male"></label><input id="gender-male" type="radio" name="gender" value="男">
2 <label for="gender-female"></label><input id="gender-female" type="radio" name="gender" value="女">

效果如下:

  • 发表于 2020-07-20 16:40
  • 阅读 ( 92 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除