您的位置：首页 > 其它

：after伪类的用法，checkbox，radio，content

2017-02-21 11:08 387 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cross{
margin: 100px;
width: 40px;
height: 40px;
background-color: #F3F9FF;
border-radius: 20px;
border: 1px solid #DBE6EF;
display: inline-block;
position: relative;
position: relative;
}
.cross:after{
content: "\2715";//特殊字符或形状
color: #a2b6c5;
font-size: 40px;
position: absolute;
cursor: pointer;
top: -9px;
left: 4px;
}
.cross:hover::after{
content: "\2764";//特殊字符或形状
color: #a2b6c5;
font-size: 40px;
position: absolute;
cursor: pointer;
top: -7px;
left: 1px;
}
input[type=checkbox],input[type=radio]{
display: inline-block;
width: 28px;
height: 28px;
border: 0;
outline: 0!important;
background-color: transparent;
-webkit-appearance: none;
position: relative;
}
input[type=checkbox]:before,input[type=radio]:before {
content: "";
background: url(imgs/icon02.png);
display: inline-block;
/*background: palegreen;
border-radius: 50%;*/
position: absolute;
width: 48px;
height: 48px;
}
input[type=checkbox]:checked:before,input[type=radio]:checked:before {
content: "";
background: url(imgs/icon01.png);
display: inline-block;
/* background: palegreen; */
/* border-radius: 50%; */
position: absolute;
width: 48px;
height: 48px;
}
</style>
</head>
<body>
<div id="div1" style="margin: 200px;">
<div id="" class="cross"></div>
<input type="checkbox" name="checkbox01" id="" value="" />
<input type="checkbox" name="checkbox01" id="" value="" />

<br/>
<input type="radio" name="dongtao" id="" value="" />
<input type="radio" name="dongtao" id="" value="" />
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航