使用必需属性在HTML5输入字段上设置提示样式

Question

是否可以在使用required属性时设置HTML5输入字段上显示的提示的样式.如果您不确定我在说什么,请单击此表单上的提交而不填写任何内容.您应该有一个提示弹出窗口.

http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html

我检查了CSS源代码,看不到有关提示的任何内容.

我发现以重置方式设置div元素的样式会影响它的显示方式.但我不知道如何具体针对它.

请注意:我不是指占位符.

干杯,托马斯.

Answer 1

为什么你可以使用div-selector设置错误气泡的原因是Chrome 11/12中的一个错误,应该在较新版本中修复.有一些伪类来设置Chrome 12中的错误气泡(可能还有Safari6)(:: - webkit-validation-bubble等).您可以在以下文档中找到完整的HTML结构,包括伪元素选择器和一些样式示例.

请注意,这是HTML5表单约束验证和非标准的webkit扩展.如果要在所有支持HTML5验证的浏览器中使用一种方式设置错误消息样式,则必须使用JavaScript.

这个的关键原则是你必须为invalid-event添加一个处理程序(注意:无效事件不会冒泡),然后阻止默认交互.这将删除浏览器本机错误气泡,您可以在所有HTML5浏览器中实现自定义样式化UI.

//Note: that we use true for useCapture, because invalid does not bubble
document.addEventListener('invalid', function(e){
    //prevent the browser from showing his error bubble
    e.preventDefault();
    //now you can implement your own validation UI (showError is a Custom method which has to be implemented by you
    showError(e.target, $.prop(e.target, 'validationMessage');
}, true);

上面的代码将为当前表单中的所有无效元素调用showError.如果您只想为第一个无效元素执行此操作,则可以执行以下操作:

document.addEventListener('invalid', (function(){
    var isFirst = true;
    return function(e){
        //prevent the browser from showing his error bubble
        e.preventDefault();
        //now you can implement your own validation UI
        if(isFirst){
            showError(e.target, $.prop(e.target, 'validationMessage');
            //set isFirst to false
            isFirst = false;
            //reset isFirst to true, so user can try to submit invalid forms multiple times
            setTimeout(function(){
                isFirst = true;
            }, 9);
        }
    };
})(), true);

如果您为您的网站使用jQuery,我建议使用webshims lib.webshims lib在所有浏览器(包括IE6)中实现HTML5约束验证,并提供了一个简单的扩展,用于生成简单的自定义样式验证消息.JS代码如下所示:

$(document).bind('firstinvalid', function(e){
    $.webshims.validityAlert.showFor( e.target ); 
    //prevent browser from showing native validation message 
    return false; 
});

生成的HTML结构$.webshims.validityAlert.showFor如下所示:

<span class="validity-alert" role="alert"> 
    <span class="va-arrow"><span class="va-arrow-box"></span></span> 
    <span class="va-box">Error message of the current field</span> 
</span>

Answer 2

您可以使用以下伪选择器在webkit中设置验证气泡的样式:

::-webkit-validation-bubble
::-webkit-validation-bubble-top-outer-arrow
::-webkit-validation-bubble-top-inner-arrow
::-webkit-validation-bubble-message

对于Mozilla浏览器,还没有办法.x-moz-errormessage如果您想更改文本,Mozilla会支持:https://developer.mozilla.org/en/HTML/element/input#section_5

Answer 3

如果你指的是 Opera 和 Chrome 使用的提示，那么恐怕你不能。