zoukankan      html  css  js  c++  java
  • 解决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); });
  • 相关阅读:
    CF700C Break Up
    CF865C Gotta Go Fast
    CF1559D2 Mocha and Diana (Hard Version)
    CF1500C Matrix Sorting
    排列计数机
    CSP-S 2021 退役记
    【做题记录】[NOIP2011 提高组] 观光公交
    【做题记录】构造题
    乱搞
    二维树状数组
  • 原文地址:https://www.cnblogs.com/colorful-paopao1/p/11639639.html
Copyright © 2011-2022 走看看