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

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

在Chrome中，可以使用各种::-webkit-validation-bubble*伪元素更改外观，但support for this was removed。

因此，如果您想立即更改外观，则必须禁止原生气泡并实施自己的自定义UI，例如参见webshims lib constraint validation的演示。