{技术操作} input框 单选框 边框 背景设置

input框 单选框 边框 背景设置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        input[type="checkbox"] + label::before {
            content: "\a0"; 
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            border: 1px solid #01cd78;
            line-height: 1;    box-sizing: border-box;;
        }
 
        .btn_kuang[type="checkbox"]:checked + label::before {
            background-color: #01cd78;
            padding: .1em;
 			width: 1em;
            height: 1em;
            background-clip: content-box;
        }
 
        input[type="checkbox"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
    </style>
</head>
<body>
    <div class="female">
        <input type="checkbox" id="female"  class="btn_kuang"  />
        <label for="female">女</label>
    </div>
    <div >
        <input type="checkbox" id="male" class="btn_kuang" />
        <label for="male">男</label>
    </div>
     <div class="male1">
        <input type="checkbox" id="male1" class="btn_kuang" />
        <label for="male1">男</label>
    </div>
</body>
</html>
posted @ 2019-07-18 13:48  193557749  阅读(421)  评论(0)    收藏  举报