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

clipboard.png

clipboard.png

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

阅读 6.1k
3 个回答

这种一般是通过伪元素设置的样式,把原来的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>

如果样式不一样的话就直接自己重新写一个,不用修改他的css

在引用了weui的基础上直接F12网页调试,改到想要的效果。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题