修改单选框的样式

最新推荐文章于 2024-08-20 16:45:24 发布

就这么开心

最新推荐文章于 2024-08-20 16:45:24 发布

阅读量3.5k

点赞数 4

分类专栏： css radio 文章标签： radio

本文链接：https://blog.csdn.net/weixin_43478869/article/details/86487470

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

radio

1 篇文章 0 订阅

订阅专栏

看了好多的资料，有的说radio样式不能修改因为那是默认的，有的说可以。最后还是通过和朋友谈论实现的。

单选框的圆的样式可以修改。其实就是给一个新的样式将原来的覆盖掉，而不是真正的修改了原来的默认样式。

下来上代码

css的

.inputt input[type=radio]+label, inputtt input[type=radio]+label{
                    line-height: 1;
                    position: relative;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    -ms-flex-align: center;
                    align-items: center;
                    margin-top: -20px;
                }
                .inputt input[type=radio]+label:before, .inputtt input[type=radio]+label:before{
                    line-height: 20px;
                    display: inline-block;
                    width: 13px;
                    height: 13px;
                    margin-right: 8px;
                    content: '';
                    color: #fff;
                    border: 1px solid #dce4e6;
                    background-color: #f3f6f8;
                    border-radius: 3px;
                }
//这块的checked是单选选定的 使用背景图实现
                .inputt input[type=radio]:checked+label:before, .inputtt input[type=radio]:checked+label:before{
                    content:' ';
                    background:rgba(255, 207, 0, 1) url(../../static/images/zheng.png)  no-repeat;
                    background-size:cover;
                }

HTML 的代码

 <div class="inputt">
      <input type="radio" name="picRadio" checked="checked" id="radioOne"/>
      <label for="radioOne">学生</label>
 </div>
 <div class="inputtt">
      <input type="radio" name="picRadio" id="radioTwo"/>
      <label for="radioTwo">非学生</label>
 </div>

切记HTML中 id="radio" 必须写不写的话不能点击，不要问我为什么，我也是实践之后知道的。