解决ios中input兼容性问题

1、解决input输入框在iOS中有阴影问题

input{
    -webkit-appearance: none;
}

2、checkbox、raido在ios中阴影问题

单选:                                                              多选: 

  单选: <div class="m_radio">
                        <div class="login_agree">
                            <input type="radio" name="optionsRadiosinline" id="optionsRadios1" value="option1" checked>
                            <label for="optionsRadios1" class="input_agree" >加密锁</label>
                        </div>
                        <div class="login_agree">
                            <input type="radio"name="optionsRadiosinline" id="optionsRadios2" value="option2">
                            <label for="optionsRadios2" class="input_agree">软加密(支持离线激活)</label>
                        </div>
                    </div>
 多选: <div class="pro_checkbox">
                            <input type="checkbox" id="pro_one"  name="pro_one">
                            <label for="pro_one"></label>
                        </div>
css:
.pro-list label::before
{ content: ""; display: inline-block; width: 20px; height: 20px; /*background: #EEE;*/ border:1px solid #999; vertical-align: middle; -webkit-border-radius: 50%; margin-right: 5px; -webkit-box-sizing:border-box; -webkit-transition:background ease-in .5s } .pro-list input[type="checkbox"]:checked+label::before{ background-color: #4e39c2; border: 2px #b3b3b3 solid; } /*自定义单选框radio样式*/ .pro-list .login_agree { position: relative; margin-left:10px; -webkit-box-sizing:border-box; vertical-align: middle; } .pro-list .login_agree input[type="radio"]{ display: none; } .pro-list input[type="radio"]+label::before{ width: 15px; height:15px; } .pro-list .login_agree input[type="radio"]:checked+label::before{ background-color: #f4d345; border: 1px #ccc solid; width: 15px; height:15px; } /*自定义复选框checkbox*/ .pro-list .pro_checkbox{ position: relative; } .pro-list .pro_checkbox input[type="checkbox"]{ display: none; } .pro-list .input_agree,label{font-weight:500;font-size:.6rem;}
js部分:
$('.pro_checkbox').find('input[type=checkbox]').bind('click', function(){ $('.pro_checkbox').find('input[type=checkbox]').not(this).attr("checked", false); });

猜你喜欢

转载自www.cnblogs.com/colorful-paopao1/p/11639639.html