美文网首页
单选框和多选框样式

单选框和多选框样式

作者: WangYatao | 来源:发表于2018-07-07 11:16 被阅读46次

    效果图

    当点击选择区域后中间的会以蓝色向周围扩散并且充满选择块,当选择其他选项时上一个被选择区域背景色缩放至中间并且消失

    1
    2 3

    css部分

    :after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。

    :before 选择器在被选元素的内容前面插入内容。请使用 content 属性来指定要插入的内容。

    :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。

    translate(x,y)在x轴y轴的移动距离,如果为负值则为负方向移动

    scale3d(x,y,z)放大或缩放 x,y,z代表在x轴,y轴,z轴放大多少倍

            .selectRole{width:500px;margin: 0 auto;position: relative;overflow: hidden;margin-top: 10px;}
            .selectRole label{width:100%;padding: 20px 30px;background: #e5e5e5;display: block;box-sizing: border-box;position: relative;z-index: 98;}
            .selectRole input{position: absolute;width:26px;height:26px;right: 0;top: 50%;margin-top: -13px;z-index:99;}
            .selectRole label:after{position: absolute;content: "";width:6px;height: 6px;border-radius:50%;display: block;top:50%;left: 50%;margin-top: -3px;margin-left: -3px;transition: all .3s;}
            .selectRole input:checked ~label{color: #fff;}
            .selectRole input:checked ~label:after{background: #2a69c7;transform:translate(50%, 50%) scale3d(85,85,1);position: absolute;z-index: -99;}
            .selectRole label:before{width: 26px;height: 26px;content: "";background: url(images/duigou.png)no-repeat;position: absolute;top:50%;right:0;margin-top: -13px;margin-right: 3px;border-radius: 50%;}
            .selectRole input:checked {z-index: 0}
    

    HTML部分
    1、input中的id的值要和label中的for的值相同,否则点击字体时input不会被选中。
    2、单选按钮中的name要相同,否则点击一个其他的单选框还是在选定状态。

    <form class="form">
    <div class="selectRole">
        <input id="myradio1" type="checkbox"/>
        <label for="myradio1">
            多选
        </label>
    </div>
    <div class="selectRole">
        <input id="myradio2" type="checkbox"/>
        <label for="myradio2">
            多选
        </label>
    </div>
    <div class="selectRole">
        <input id="myradio3" name="radio" type="radio"/>
        <label for="myradio3">
            单选
        </label>
    </div>
    <div class="selectRole">
        <input id="myradio4" name="radio" type="radio"/>
        <label for="myradio4">
            单选
        </label>
    </div>
    </form>
    

    相关文章

      网友评论

          本文标题:单选框和多选框样式

          本文链接:https://www.haomeiwen.com/subject/bdtwuftx.html