重写radio样式的方法——用图片代替

最新推荐文章于 2022-03-28 22:35:45 发布

不认输的西瓜

最新推荐文章于 2022-03-28 22:35:45 发布

阅读量771

点赞数

文章标签：重写radio样式 css html

本文链接：https://blog.csdn.net/qq_40678503/article/details/104614308

版权

最近在开发中碰到要重写radio样式的问题，因为默认样式不太好看，所以用两张图片分别代替未选中和选中的样式

代码如下：

HTML代码：

<input id="id1" type="radio">
<label for="id1">选项1</label>

CSS代码

input[type='radio'] {
        position: absolute;
        clip: rect(0,0,0,0);
    }
    input[type='radio'] + label::before{
        content:'';
        background: url("assets/1.png");
        background-size: cover;
        width:30px;
        height:30px;
        float: left;
    }
    input[type='radio']:checked + label::before{
        background: url("assets/2.png");
        background-clip: content-box;
        background-size: cover;
        width:30px;
        height:30px;
  }

火狐和谷歌都是兼容的。