鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ 用weui怎么修改radio和checkbox的樣式

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

clipboard.png

clipboard.png

要這樣的效果不知道在weui的基礎(chǔ)刪怎么改

回答
編輯回答
空痕

在引用了weui的基礎(chǔ)上直接F12網(wǎng)頁(yè)調(diào)試，改到想要的效果。

2017年11月9日 20:36
編輯回答
故林

如果樣式不一樣的話就直接自己重新寫(xiě)一個(gè)，不用修改他的css

2017年12月3日 07:20
編輯回答
撥弦

這種一般是通過(guò)偽元素設(shè)置的樣式，把原來(lái)的input給隱藏了或者絕對(duì)定位在覆蓋樣式上面opacity設(shè)為0，label用for和input關(guān)聯(lián)起來(lái)，通過(guò):checked改變的樣式，類(lèi)似于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>
2018年6月2日 10:43