Css 样式HTML5验证iPad/iPhone

有没有一种方法可以设计这些HTML5验证的样式。在我的web应用程序中，我使用它们，它们如下所示：

它没有在文本上方添加边距/填充。有没有办法解决这个问题

**Here is the quick solution. We can't target validation popup directly in css.**

//1。使用“noValidate”禁用本机验证UI`
// 2. 提交时，进行评估，必要时进行预防
const form=document.querySelector（'form'）
form.noValidate=true
form.onsubmit=evt=>{
如果（！form.checkValidity（））{
evt.preventDefault（）
}
}
//迭代表单中的字段
for（form.querySelectorAll（'input，textarea，select'）的const字段）{
//添加错误容器
field.insertAdjacentHTML（'afterend'，''）
//显示关于“无效”事件的消息
field.oninvalid=（）=>{
field.classList.add（'无效'）
field.nextSibling.textContent=field.validationMessage
//重置“输入”事件的无效状态和错误消息，触发验证检查
常量inputHandler=（）=>{
field.oninput=null
field.nextSibling.textContent=“”
field.classList.remove（'无效'）
field.checkValidity（）
}
field.oninput=inputHandler
}
}

/*全局样式*/
html{
身高：100%；
}
身体{
字体系列：无衬线；
字体大小：300；
字体大小：20px；
背景：线性梯度（至顶部，#e0e7ef，#eef2f7）；
最小高度：100%；
颜色：#798594；
线高：1.6；
}
/*表单样式*/
形式{
背景#f8fafb；
填充物：3em 1em；
边界半径：3px；
箱形阴影：0.1em 0.4em#b7ccde；
最大宽度：15em；
利润率：2米自动；
}
按钮，输入，文本区，选择{
字体：继承；
颜色：继承；
填充：0.4em 0.6em；
边框：1px实心#ccc；
边界半径：4px；
宽度：100%；
框大小：边框框；
边缘底部：0.5em；
}
钮扣{
光标：指针；
背景色：#e9f1ff；
颜色：#7e93b7；
}
输入{
显示：块；
位置：相对位置；
z指数：1；
}
输入：：占位符{
颜色：#bbb；
}
/*错误样式*/
.无效{
盒影：0.15em 0.15em-0.1em rgba（4,4,4,0.1）；
}
.错误{
显示：无；
边缘底部：0.5雷姆；
边缘顶部：计算（-0.5rem-4px）；
左边距：2倍；
右边距：2px；
填充：计算（0.5雷姆+4倍）0.6雷姆；
背景色：#feb；
颜色：#b75a41；
边框：1px实心#e6917a；
边界半径：0 0 4px 4px；
动画：显示错误0.3s；
字号：0.8em；
}
.无效+.错误{
显示：块；
}
@关键帧显示错误{
从{
变换：translateY（-2em）scaleY（0.2）；
}
到{
转化：无；
}
}

登记