input radio checkbox选中的c's's

最新推荐文章于 2022-07-21 08:15:43 发布

asd2014916

最新推荐文章于 2022-07-21 08:15:43 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/MR-cui/p/9663187.html

版权

<form action="">
            <div class="brand">
                    <span>商标知识产权集团商标公证1</span>
                    <input type="radio" name="brand" value="man" id="man" >
                    <label for="man"></label>
            </div>
            <div class="brand ">
                    <span>商标知识产权集团商标公证2</span>
                    <input type="radio" name="brand" value="female" id="female" >
                    <label for="female"></label>
            </div>
            <div class="brand">
                    <span>商标知识产权集团商标公证3</span>
                    <input type="radio" name="brand" value="do" id="do" >
                    <label for="do"></label>
            </div>
            <div class="confirm-search"">
                    <button type="submit">查询</button>
            </div>
    </form>

.brand{
        padding: 0 .24rem;
        height: .9rem;
        background: #fff;
        line-height: .9rem;
        font-size: .28rem;
        border-bottom:0.01rem solid #f2f2f2;
        position: relative;
        color:rgb(108,108,108);
    }
    .brand label{
        position: absolute;
            width: .4rem;
            height: .4rem;
            right: .24rem;
            top: 50%;
            line-height: .9rem;
            margin-top: -.2rem;     
    }
    .brand input[type="radio"]{
      display: none;
    }
    .brand input[type='radio']+label:before{
        content: '';
        display: inline-block;
        position: absolute;
        width: .4rem;
        height: .4rem;
        top: 50%;
        line-height: .9rem;
        margin-top: -.2rem;     
        background: url(../images/circle.png) no-repeat;
        background-size: 0.4rem 0.4rem;
    }
    .brand input[type='radio']:checked+label:before{
      background: url('../images/chose.png');
      background-position: center center;
    }