the html code is as follows:
<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 Code:
.c-w-form{
overflow: hidden;
}
.c-w-form .c-w-item{
height: .54rem;
margin-bottom:.1rem;
color:-sharp6b84a0;
}
.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:-sharp6b84a0;
-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:-sharpfff;
color:-sharp000;
}
.c-w-form .c-w-item .w-f-txt:focus + .fas{
color:-sharp000;
}
.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:-sharpfff;
background: -sharp23da94;
cursor: pointer;
}
problem description :
under Safari (Mac), clicking input.w-f-btn
will not trigger the submit
event, nor will the css code cursor:pointer
. This is true for both Safari and Chrome under ios (ios mobile only tests these two browsers), and other browsers are normal (PC and Android).
I found that this problem occurs when the container div.c-w-item
sets the height height:.45rem
for input.w-f-btn
.