前端开发CSS美化单选框

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>旬&nbsp;报</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
赞(0)
64K

评论 抢沙发

评论前必须登录!