<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;
}
![]()