单选框和复选框的样式修改

最新推荐文章于 2023-01-08 20:39:12 发布

guangming0538

最新推荐文章于 2023-01-08 20:39:12 发布

阅读量446

点赞数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html</title>
</head>
<style>
/* 单选框样式 */
.radio input {
display: none;
}
.radio label:active {
color: #000;
}
.radio label {
width: 100%;
height: 100%;
display: inline-block;
position: relative;
line-height: 50px;
color: #999;
padding-left: 50px;
}
.radio label:after {
content: ""; /*必须设置*/
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid green;
position: absolute;
top: 15px;
left: 15px;
border-radius: 20px;
}
.radio input:checked + label:after {
background-color: green;
}

/* 多选框的样式 */
.checkbox input {
display: none;
}
.checkbox label {
width: 100%;
height: 50px;
display: inline-block;
line-height: 50px;
position: relative;
padding-left: 50px;
}
.checkbox label:active {
background: #eeeeee;
}
.checkbox label:after {
content: "";
width: 20px;
height: 20px;
border: 1px solid green;
display: inline-block;
position: absolute;
top: 15px;
left: 15px;
}
.checkbox input:checked + label:before {
content: "\2713";
height: 20px;
position: absolute;
top: 0;
left: 20px;
}
</style>
<body>
<h1>2018 09 16</h1>