HTML/CSS radio buttons
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="keywords" content="zidingyi">
<meta name="description" content="zidingyi">
<meta charset="UTF-8">
<title></title>
<style>
.wrapper {
width: 400px;
margin-top: 20px;
margin: 100px auto;
padding: 0;
list-style-type: none;
}
.wrapper li {
margin-top: 10px;
}
.wrapper input[type="radio"] {
/* 去掉input前面的圆点 */
display: none;
}
.wrapper input[type="radio"] + label {
display: block;
width: 400px;
height: 20px;
line-height: 20px;
font-size: 14px;
}
.wrapper input[type="radio"] + label::before {
float: left; /*如果不浮动，就看不到这个红色的框框，因为::before是行内元素*/
content: "";
width: 20px;
height: 20px;
border: 1px solid red;
margin-right: 10px;
}
.wrapper input[type="radio"]:checked + label::before {
content: "√";
text-align: center;
color:#FFF;
background-color:rgb(222, 134, 80);
}
.wrapper input[type="radio"][id="hello5"]:checked + label::after {
content:"小伙子你的思想很危险！";
font-size: 12px;
color: red;
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<ul class="wrapper">
<li>
<input type="radio" name="hello" id="hello1"> <label for="hello1">周一学习</label>
</li>
<li>
<input type="radio" name="hello" id="hello2"> <label for="hello2">周二学习</label>
</li>
<li>
<input type="radio" name="hello" id="hello3"> <label for="hello3">周三学习</label>
</li>
<li>
<input type="radio" name="hello" id="hello4"> <label for="hello4">周四学习</label>
</li>
<li>
<input type="radio" name="hello" id="hello5"> <label for="hello5">周五休息</label>
</li>
</ul>
</body>
</html>
display:
