even

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::

2、radio的样式美化 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
.el-radio{
    display: inline-block;
    color: #606266;
    white-space: nowrap;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.el-radio-box{
    border: 1px solid #dcdfe6;
    display: inline-block;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    vertical-align: middle;
}
.el-radio-box:after{
    display: inline-block;
    content:'';
    width: 6px;
    height: 6px;
    background-color: #b4b4b4;
    border-radius: 100%;
    border: 1px solid #b4b4b4;
    position: absolute;
    margin-top: -4px;
    top: 50%;
    left: 4px;
}
.el-radio-origin:checked+.el-radio-box{
    border: 1px solid #3197EE;
}
.el-radio-origin:checked+.el-radio-box:after{
    background-color: #3197EE;
    border: 1px solid #3197EE;
}
.el-radio-origin{
    opacity: 0;
    position: absolute;
    left: -999px;
}
.el-radio-text{
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 3px;
    padding-left: 3px;
}
/*禁用的状态*/
.el-is-disabled{
    cursor: not-allowed;
}
.el-is-disabled .el-radio-text {
    color: #c0c4cc;
}
</style>
<body>
    <label role='radio' class='el-radio'>
        <span>
            <input type="radio" class='el-radio-origin' name='name'>
            <span class='el-radio-box'></span>
        </span>
        <span class='el-radio-text'>单选框1</span>
    </label>
    <label role='radio' class='el-radio'>
        <span>
            <input type="radio" class='el-radio-origin' name='name'>
            <span class='el-radio-box'></span>
        </span>
        <span class='el-radio-text'>单选框2</span>
    </label>
    <label role='radio' class='el-radio el-is-disabled'>
        <span>
            <input type="radio" class='el-radio-origin' name='name' disabled>
            <span class='el-radio-box'></span>
        </span>
        <span class='el-radio-text'>单选框3</span>
    </label>
</body>
</html>

 

posted on 2019-11-17 15:26  even_blogs  阅读(357)  评论(0)    收藏  举报