您现在的位置是:首页 > 学无止境 > Web网站首页Web radio单选框css美化

radio单选框css美化

  • 莫愁
  • Web
  • 2019-10-25
简介如何美化radio单选框呢?
字数 1007.5

如何美化radio单选框呢? 

美化效果

radio单选框css美化

 

style样式

<style>
    /* radio 单选 */
    div.form-radio input[type="radio"] {
        display: none;
    }

    div.form-radio input[type="radio"],
    div.form-radio label {
        position: relative;
        vertical-align: middle;
        margin: 0;
        margin-right: 32px;
        cursor: pointer;
    }

    div.form-radio input[type="radio"],
    div.form-radio label {
        position: relative;
        vertical-align: middle;
        margin: 0;
        margin-right: 32px;
        cursor: pointer;
    }

    div.form-radio input[type="radio"]:checked+label::before {
        background-color: #409eff;
    }

    div.form-radio label::before {
        display: inline-block;
        content: '';
        width: 20px;
        height: 20px;
        background: #FAFAFA;
        border: 1px solid #DDDDDD;
        border-radius: 50%;
        vertical-align: -3px;
        transition: all 0.3s ease-in;
    }

    div.form-radio input[type="radio"]:checked+label::after {
        transform: translateY(-50%) scale(1);
    }


    div.form-radio label::after {
        content: '';
        width: 8px;
        height: 8px;
        background: #fff;
        vertical-align: 1px;
        position: absolute;
        top: 50%;
        left: 6px;
        margin-top: -1px;
        transform: translateY(-50%) scale(0.01);
        transform-origin: center center;
        transition: transform 0.3s ease-out;
        border-radius: 50%;
    }
    div.form-radio {
        line-height: 32px;
    }
</style>

 

html 标签

<div class="form-radio">
    <input class="form-radio-input" type="radio" value="1" name="editType" id="rdoEditorMD">
    <label for="rdoEditorMD" class="form-radio-label">
        MarkDown编辑器
    </label>

    <input class="form-radio-input" type="radio" value="2" name="editType" id="rdoEditorMD1">
    <label for="rdoEditorMD1" class="form-radio-label">
        MarkDown编辑器
    </label>
</div>

 


转载: 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/362.html”。

文章评论

    • 评论
    人参与,条评论

技术在线

服务时间

周一至周日 12:00-22:00

关闭下雪
关闭背景特效

最新文章