html5输入错误提示

Question

我正在用html5写移动页面，并且有一个需要属性的输入元素。如果没有输入，错误提示会显示。但它出现在chrome v30的输入中心点。所以我的quetion是如何将错误提示移到输入的开头？

<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的演示。