Safari 和 ios移动端浏览器 input[type=submit]点击失效问题

我已经是个废人了
  • 60

html代码如下:

            <form action="getInfo.php" class="c-w-form" method="POST">
                <div class="c-w-item pr">
                    <input type="text" class="w-f-input w-f-txt" name="username" placeholder="Full Name"  required>
                    <i class="fas fa-user pa"></i>
                </div>
                <div class="c-w-item pr">
                        <input type="text" name="email" class="w-f-input w-f-txt" placeholder="Email ID"  required>
                        <i class="fas fa-envelope pa"></i>
                </div>
                <div class="c-w-item pr">
                        <input type="password" name="psw" class="w-f-input w-f-txt" placeholder="Set Password"  required>
                        <i class="fas fa-unlock-alt pa"></i>
                </div>
                <div class="c-w-item">
                        <input type="submit" class="w-f-input w-f-btn" value="SIGN UP">
                </div>
            </form>

css代码:

.c-w-form{
    overflow: hidden;
}
.c-w-form .c-w-item{
    height: .54rem;
    margin-bottom:.1rem;
    color:#6b84a0;
}
.c-w-form .c-w-item:last-child{
    margin-bottom: 0;
    padding-top:.3rem;
}
.c-w-form .c-w-item .w-f-input{
    width: 2.47rem;
    height: .54rem;
    border-radius: 1.2rem;
    padding: 0 .26rem;
    font-family: robotolight;
    font-size:.16rem;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.c-w-form .c-w-item .w-f-txt{
    background: rgba(25,64,107,0.7);    
    color:#6b84a0;   
    -webkit-transition: background .5s;
    transition: background .5s;
}
.c-w-form .c-w-item .w-f-txt:focus{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background:#fff;
    color:#000;
}
.c-w-form .c-w-item .w-f-txt:focus + .fas{
    color:#000;
}
.c-w-form .c-w-item .fas{
    top: 0.18rem;
    right: .26rem;
    font-size: .18rem;
}
.c-w-form .c-w-item .w-f-btn{
    width:100%;
    color:#fff;
    background: #23da94;
    cursor: pointer;
}

问题描述
在Safari(Mac)下,点击input.w-f-btn 不会触发submit 事件,css代码cursor:pointer也无效,ios下Safari和Chrome都会这样(ios 移动端只测试这两款浏览器),其他浏览器正常(PC和安卓)。
我发现给input.w-f-btn的容器div.c-w-item设置高度height:.45rem就会出现这个问题...
图片描述

回复
阅读 3.2k
1 个回答
yellowanimate
  • 1
新手上路,请多包涵

input的提交按钮位置完全不在form范围内就无法点击,比如说设置绝对定位情况下top-150%,(你代码太多,我没看),你看看是不是这情况。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏