<!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>
<div class="radio">
性別： <input type="radio" name="sex" checked id="man" />
<label for="man">男</label> <input type="radio" name="sex" id="lady" />
<label for="lady">女</label>
</div>
<div class="checkbox">
愛好： <input type="checkbox" id="read" /> <label for="read">讀書</label>
<input type="checkbox" id="swiming" /> <label for="swiming">讀書</label>
<input type="checkbox" id="basketball" />
<label for="basketball">讀書</label>
</div>
</body>
</html>
