前端开发css美化单选框
摘要： 2017 前端开发新技术 传统的前端开发技术栈 前端开发技术未来趋势 知乎 html 代码 <style type=”text/css” media=”all”> .radio-box { display: inline-……
| 2017 前端开发新技术 |
| 传统的前端开发技术栈 |
| 前端开发技术未来趋势 知乎 |
html 代码
<style type=”text/css” media=”all”>
.radio-box {
display: inline-block;
margin-right: 10px;
}
.radio-box input {
display: none;
}
.radio-box label {
position: relative;
display: inline-block;
width: 14px;
height: 14px;
top: 0;
left: 0;
vertical-align: middle;
border: solid 1px #535554;
border-radius: 50%;
cursor: pointer;
}
.radio-box input:checked + label {
border: solid 1px #1fc0f0;
}
.radio-box input:checked + label:after {
content: ”;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -5px;
margin-left: -5px;
background: #00b7ee;
border-radius: 50%;
}
.check-box em {
margin: 0 0 0 5px;
}
</style>
<span class=”radio-box”>
<input type=”radio” id=”xb” name=”radio” /> <label for=”xb”></label>
<em>旬 报</em>
</span>
<span class=”radio-box”>
<input type=”radio” id=”cbzb” name=”radio” /> <label for=”cbzb”></label>
<em>春播专报</em>
</span>
<span class=”radio-box”>
<input type=”radio” id=”qsqz” name=”radio” /> <label for=”qsqz”></label>
<em>秋收秋种</em>
</span>
| 2017前端开发新技术 |
| web前端开发技术实验 |
| 前端开发技术的重要性 |
» 本文来自：前端开发者 » 《前端开发css美化单选框》
» 本文链接地址：https://www.rokub.com/7865.html
» 您也可以订阅本站：https://www.rokub.com
近期评论