Css 使用required属性在HTML5输入字段上设置提示的样式

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

我已经检查了CSS源代码，没有看到任何关于提示的内容

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

请注意：我指的不是占位符

干杯，

---

Thomas。

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

我找到了一种方法来禁止显示提示

基本上，我发现它们在一个div元素中，如果我把它添加到顶部，在我的重置中

div { display: none; }
body div { display: block; }

然后提示不再出现，但我的其他div工作正常

我还相信提示出现在HTML文档标记之外。使用HTMLdiv进行样式设置对提示也没有影响。有趣的东西

---

但这只适用于Chrome。

之所以可以使用div选择器设置错误气泡的样式，是因为Chrome 11/12中有一个bug，应该是s。Chrome12（和Safari6中的maybee）中有一些伪类用于设置错误气泡的样式（：-webkit验证气泡等）。您可以在中找到完整的HTML结构，包括伪元素选择器和一些样式示例

注意，这是HTML5表单约束验证和非标准的webkit扩展。如果您想在所有支持HTML5验证的浏览器中使用一种方式来设置错误消息的样式，那么必须使用JavaScript

其中的关键原则是，您必须向无效事件添加处理程序（注意：无效事件不会冒泡），然后阻止默认交互。这将删除浏览器本机错误气泡，并且您可以在所有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在所有浏览器（包括IE6）中实现了HTML5约束验证，并提供了一个简单的扩展，用于生成简单的自定义样式验证消息。JS代码如下所示：

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

<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>

$.webshims.validitylert.showFor

生成的HTML结构如下所示：

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

<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>

当前字段的错误消息

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

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

---

对于Mozilla浏览器，目前还没有一种方法。Mozilla确实支持

x-moz-errormessage

如果您想更改文本：

我刚刚在FF4中检查了它，提示实际上是静态的：它不跟随输入，只是停留在屏幕上，无论您滚动到哪里-不是很好！当我滚动的时候，它真的吓坏了，到处都是！在FF3.6中根本没有出现。除了语义，使用“required”属性的主要原因之一是让浏览器处理它。如果您想使用自己的代码进行验证，那么不要使用它。如果可访问性是您主要关心的问题，请使用“aria required=true”，必须有。。。因为上面网站上出现的和我网站上出现的完全不同。在我的网站上，它们出现在一个圆角的透明框中。有关更多详细信息，请参见和。看起来很奇怪。我几乎不会将其称为样式：-）可以在Chrome中设置样式的原因是Chrome使用JavaScript将其放在页面上。。。它实际上是一个位于标记之外的元素。我在测试CSS重置规则时发现了这一点。你不能做太多，因为没有足够的类钩子。这很有趣，看起来他们还没有弄明白这一点。有趣…可能不是未来的证明。