当前位置：文江博客话题详情

用weui怎么修改radio和checkbox的样式

发布于 2022-09-06 03:54:56 字数 320 浏览 13 评论 0

要这样的效果不知道在weui的基础删怎么改

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

也只是曾经 2022-09-13 03:54:56

这种一般是通过伪元素设置的样式，把原来的input给隐藏了或者绝对定位在覆盖样式上面opacity设为0，label用for和input关联起来，通过:checked改变的样式，类似于input[type="checkbox"]:checked+label:after
给你参考参考吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="normalize.css"/>
        <style type="text/css">
           input[type="checkbox"]:checked+label:after{
                  content: '\2714';          
                  background-color: #ff5757;
                  color: #FFF;
                  border-color: #ff5757; 
           } 
           } 
           input[type="checkbox"]{
               display: none;
           }
           label:after{
               content: '';
               position: absolute;
               left: 0;
               top: 0;
               width: 18px;
               height: 18px;
               border: 1px solid #CCC; 
               box-sizing: border-box;
               line-height: 18px;
               text-align: center;
               border-radius: 3px;
            font-size: 14px;                
               
           }
           label{
               position: relative;
               padding-left: 25px;
               box-sizing: border-box;
               line-height: 20px;
               font-size: 14px;
               height: 20px;
           }
           #top{
               margin: 100px;
           }
           input[type="checkbox"]:checked ~ img{
               transform: translateX(500px);
           }
           #img{
               transition: all 1s; 
           }
        </style>
    </head>
    <body>
    <div id="top">
            <input type="checkbox" id="mycheck"/>
            <label for="mycheck">嘘嘘嘘嘘嘘</label>
            <img src="2.jpg" id="img" alt="" />
    </div>        
    </body>
</html>

回复收藏 0