html - html5输入错误提示

Question

我正在用html5编写移动页面。并且有一个带有必需属性的输入元素。如果不输入任何内容，则会显示错误提示。但它出现在chrome v30中输入的中心点。所以我的问题是如何移动错误提示输入的开始？

<input type='text'  required='required' data-tips='why here?why not start?'/>
<script type='text/javascript'>
    var i = document.getElementsTagName('input')[0];
    i.setCustomValidity(i.getAttribute('data-tips'));
</script>

Answer 1

你不能，就是这样，浏览器会以不同的方式呈现它，你无法控制原生外观。

::-webkit-validation-bubble*在 Chrome 中，可以使用各种伪元素来更改外观，但对此的支持已被删除。

因此，如果您现在想更改外观，则必须抑制原生气泡并实现自己的自定义 UI，例如参见webshims lib 约束验证的演示。