在开发公众号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;
}