MR-cui
<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;
    }

 

分类:

技术点:

相关文章:

  • 2022-01-22
  • 2022-02-26
  • 2021-12-04
  • 2021-09-18
  • 2021-10-23
猜你喜欢
  • 2021-10-09
  • 2021-11-12
  • 2021-04-29
  • 2021-06-10
  • 2021-07-08
  • 2021-11-08
  • 2021-10-11
相关资源
相似解决方案