css如何自定义radio单选框样式?(代码实现)

首页 编程分享 CSS丨HTML 正文

不言 转载 编程分享 2018-01-29 02:22:23

简介 adio单选框样式 ?(代码实现),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。


本篇文章给大家带来的内容是关于css如何自定义radio单选框样式 ?(代码实现),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

html部分

<div class="radio">
    <label>
        <input name="feel" type="radio" value="love" />
        <span class="pos">
            <span class="radio_bg">
                <span class="radio_on"></span>
            </span>
        </span>
        <span>LOVE</span>
    </label>
    <label>
        <input name="feel" type="radio" value="hate" />
        <span class="pos">
            <span class="radio_bg">
                <span class="radio_on"></span>
            </span>
        </span>
        <span>YOU ARE NICE</span>
    </label>
</div>

css样式部分

            .radio {
                width: 260px;
                height: 26px;
                line-height: 26px;
                margin: 200px auto;
                background-color: Idddeef1;
                font-size: 16px;
                color: Id495060;
                text-align: center;
            }        
            label:first-child {
                margin-right: 40px;
            }
            label input, .radio_on {
              display: none;
            }            
            .pos {
                display: inline;
                vertical-align: middle;
            }        
            .radio_bg {
              position: relative;
              display: inline-block;
              height: 14px;
              width: 14px;
              border: 1px solid IdB3B4B8;
              border-radius: 50%;
            }        
            label:hover .radio_bg, label input:checked + span.pos span.radio_bg {
              border: 1px solid Id27B28B;
            }        
            label input:checked + span.pos span.radio_bg .radio_on {
              display: inline-block;
              position: absolute;
              top: 2px;
              left: 2px;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: Id27B28B;
            }

效果图

相关推荐:


  • 上一篇:
  • 下一篇:

转载链接:http://www.php.cn//css-tutorial-408826.html


Tags:


本篇评论 —— 揽流光,涤眉霜,清露烈酒一口话苍茫。


    声明:参照站内规则,不文明言论将会删除,谢谢合作。


      最新评论




ABOUT ME

Blogger:袅袅牧童 | Arkin

Ido:PHP攻城狮

WeChat:nnmutong

Email:nnmutong@icloud.com

标签云