解决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);
    });

来源：https://www.cnblogs.com/colorful-paopao1/p/11639639.html

标签

input

checkbox样式

复选框

label