自定义单选按钮和文本框

单选按钮

html：

<span class="radio_btn">
<input type="radio" name="company_type" id="tax" checked />
 <span></span>
 </span>
<label for="tax" >税务师事务所</label>

 css：

.radio_btn input{
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 100;
     opacity: 0;
     margin-right: 34px;
 }
.radio_btn span{
    background: #bfbfbf;
    width: 8px;
    height: 8px;
    display: inline-block;
    position: absolute;
    z-index: 1;
    top: 3px;
    left: 3px;
    border-radius: 50%;
}
.radio_btn input[type="radio"] + span{
    opacity: 0;
 }
.radio_btn input[type="radio"]:checked + span{
    opacity: 1;
}

 显示效果：

 

转载于:https://www.cnblogs.com/feilu2016/p/7283314.html