css - 浏览器使用什么 CSS 来设置无效 <input type ="email"> 的样式?

标签 css forms html webforms

好的,所以在 HTML5 浏览器中你可以:

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

当电子邮件格式不正确时,它会在其周围放置一个红框。

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

最佳答案

取决于浏览器。这应该涵盖您的基础:

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

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

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 - 浏览器使用什么 CSS 来设置无效 &lt;input type ="email"> 的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59414294/

相关文章:

php - Symfony2 表单子(monad)项和错误

javascript - 配置文件特定的动画 CPU

css - 元素在页面加载时移动

javascript - 如何在 Bootstrap 中连续获得相同大小的列?

javascript - Bootstrap nav-tabs 'show' 不起作用?

html - z-index 不适用于 &lt;input&gt;

css - 闪烁的按钮(带有 GTK+ 的 C)

forms - Spring MVC : Difference between spring:bind and form:form

html - 背景图片 : url and gradient

html - 如何在 CSS 中的悬停链接上创建下划线效果?