zoukankan      html  css  js  c++  java
  • 自定义常用input表单元素二:纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和“+”css选择器为思路,下面是预览图:

    下面直入主题放代码:HTML部分

    <!--两个name相同的radio-->
    <input type="radio" id="my_radio1" class="my_radio" name="my_radio">
     <label for="my_radio1">单选Radio1</label>
    <br />
    <input type="radio" id="my_radio2" class="my_radio" name="my_radio">
    <label for="my_radio2">单选Radio2</label>

    HTML代码没什么说的,就是普通的label和input,定义相同的name即可。

    下面为CSS部分:

    /*radio单选主要样式*/
    .my_radio{opacity: 0;}
    .my_radio+label::before {
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 100%;
        border: 1px solid #d9d9d9;
        position: absolute;
        top: 3px;
        left: -24px;
        box-sizing: border-box;
    }
    
    .my_radio:hover+label::before {
        -webkit-transition: all .3s;
        transition: all .3s;
        border-color: #1890ff
    }
    
    .my_radio:checked+label::after {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: #1890ff;
        position: absolute;
        top: 7px;
        left: -20px;
        border-color: #1890ff;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    四行css,第二行为radio最外层的圆圈,第四行为radio最里面选中时的实心圆。第三行为radio hover时的效果。其他样式自己可根据需要修改。

    海纳百川,有容乃大;壁立千仞,无欲则刚。人要有胸怀方能成大事,不要被欲望所驱使,方能风吹不动浪打不摇。 不积跬步无以至千里,不积小流无以成江海。从事技术工作,要时刻学习积累,即使不能一专多能也应术业有专攻,方能以不变应万变。
  • 相关阅读:
    POJ 2750 Potted Flower (单点改动求线段树上最大子序列和)
    [异能程序猿]第四章 偶遇(第四更)
    【web开发学习笔记】Struts-Tags学习笔记1
    UVa 10100
    【算法拾遗】大数相加(不开辟额外空间)
    cocos2d-html5学习笔记(六)--alpha2中cc.Sequence.create中的bug
    大一暑假和大二专业学习的规划
    Android如何获得系统版本
    Struts2——(1)Struts2入门
    设置m_pszAppName值的做法
  • 原文地址:https://www.cnblogs.com/websharehome/p/9622090.html
Copyright © 2011-2022 走看看