浏览器使用什么CSS来设置无效的<input type =" email"的样式? [英] What CSS is used by browsers for styling invalid &lt;input type=&quot;email&quot;&gt;s?

问题描述

好，因此在HTML5浏览器中，您可以:

OK, so in HTML5 browsers you can have:

<input class="txt-box" type="email" name="email" rel="required" />

如果电子邮件格式不正确，则会在其周围放置一个红色框.

When the email is not in the proper format it puts a red box around it.

我的问题是:确定该样式的CSS是什么?

My question is: what is the CSS that determines that style?

推荐答案

取决于浏览器.这应该涵盖您的基地:

Depends on the browser. This should cover your bases:

input:invalid, input:-moz-ui-invalid {
    border:0;
    outline:none;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}

在兼容的浏览器中测试效果:

Test out the effect in a compliant browser:

input[type="email"] {
    border:0;
    outline:none;
    box-shadow:none;
}

符合IE7要求:

input.txt-box {
    border:0 !important;
    outline:none !important;
    box-shadow:none;
}

https://developer.mozilla.org/en/CSS/%3Ainvalid

示例: http://jsfiddle.net/AlienWebguy/cUgW4/

这篇关于浏览器使用什么CSS来设置无效的<input type =" email"的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！