在开发公众号H5的时候出现,输入框获取焦点了,就出现边框,目前在苹果11出现,其他设备正常,这个怎么调,跪求大佬指点!
html
<div>
<span>手机号:</span>
<input type="number" pattern="\d*" placeholder="${phonepla}" class="inputPhone"
oninput="if(value.length > 11)value = value.slice(0, 11)">
</div>
<p class="FromErr FromErrPhone">失败</p>
<div class="yanzhengma">
<div>
<span>验证码:</span>
<input type="number" pattern="\d*" placeholder="请输入验证码" class="inputCode"
oninput="if(value.length > 6)value = value.slice(0, 6)">
</div>
<div class="getCode">发送验证码</div>
</div>
<p class="FromErr FromErrCode">失败</p>`
css
input:active,
input:focus {
outline: 0;
}
input{
user-select: auto;
-webkit-user-select: auto; /*webkit浏览器*/
}
.inputPhone,
.inputCode {
display: block;
border: none;
background: none;
width: 240px;
height: 40px;
line-height: 40px;
background-color: #efefef;
border-radius: 20px;
text-indent: 16px;
font-size: 20px;
}
.yanzhengma {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.getCode {
width: 105px;
text-align: center;
font-size: 20px;
height: 40px;
color: #f8320e;
border: 0 !important;
line-height: 40px;
-webkit-user-select: auto !important;
outline: none !important;
-webkit-appearance: none !important;
}
.inputPhone {
width: 260px;
}
.inputCode {
width: 155px;
}
.FromErr {
width: 100%;
height: 26px;
text-align: left;
font-size: 20px;
color: #f8320e;
opacity: 0;
line-height: 26px;
}