要這樣的效果不知道在weui的基礎(chǔ)刪怎么改
用weui怎么修改radio和checkbox的樣式
www說
2019-02-13 17:15:53
1 回答
江戶川亂折騰
TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個(gè)贊
這種一般是通過偽元素設(shè)置的樣式，把原來的input給隱藏了或者絕對(duì)定位在覆蓋樣式上面opacity設(shè)為0，label用for和input關(guān)聯(lián)起來，通過: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>
添加回答
舉報(bào)
0/150
提交
取消