如何覆盖 HTML5 表单上必填字段的默认弹出窗口?
示例:http://jsfiddle.net/uKZGp/(确保单击提交按钮以查看弹出窗口)
HTML
<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>
注意:您必须使用 HTML5 浏览器(例如 Google Chrome 或 FireFox)查看此内容。
此链接不能解决我的问题,但它可能会让某人跳出框框思考:
仅使用 HTML/CSS 无法更改验证样式。
它是浏览器的一部分。我发现要更改的唯一属性是使用此示例的错误消息:
document.getElementById("name").setCustomValidity("Lorum Ipsum");
但是,如本示例所示:http://jsfiddle.net/trixta/qTV3g/,您可以使用 jQuery 覆盖面板样式。这不是一个插件,它是一个核心功能,使用一个名为 Webshims 的 DOM 库,当然还有一些 CSS 来设置弹出窗口的样式。
我在这个标题为Improve form validation error panel UI
的
错误帖子中发现了非常有用的示例。
我认为这是您能找到的最佳解决方案,也是覆盖基本(丑陋)错误面板的唯一方法。
我不知道为什么,但是
::-webkit-validation-bubble-message { display: none; }
对我不起作用。
通过阻止无效事件的默认行为(不会冒泡),我能够获得所需的结果(在 FF 19、Chrome 版本 29.0.1547.76 m 中测试)。
document.addEventListener(
"invalid",
(event) => {
// Prevent the browser from showing the default error bubble/hint.
event.preventDefault();
// Optionally fire off some custom validation handler.
myValidationFunction(event);
},
{ capture: true },
);
对于 webkit,您可以使用
::-webkit-validation-bubble-message
。例如隐藏它:
::-webkit-validation-bubble-message { display: none; }
还有:
::-webkit-validation-bubble-arrow-clipper{}
::-webkit-validation-bubble-arrow{}
::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}
更新: Chrome 不再允许样式化表单验证气泡:https://code.google.com/p/chromium/issues/detail?id=259050
对于 Firefox,您可以尝试使用
:-moz-placeholder {}
。
当前的默认电子邮件验证是目前我见过的 Google 设计中最丑陋的东西之一!
但是它似乎包含在标准中
div
,因此您可以对其进行一些更改,如果您记得重置这些值。
我发现你可以改变背景、字体大小和颜色、边框和阴影,就像这样
div {
background: rgba(0,0,0,0.8);
color: #333;
font-size: 11px;
border: 0;
box-shadow: none;
}
如果您随后在 html 标记内覆盖 div 的这些内容,那么最终只会影响验证。
html div {
background: rgba(0,0,0,1);
color: #000;
font-size: 12px;
}
不幸的是,您想要更改的一些关键属性(例如
margin
和 font-weight
)无法更改。
注意。该技术目前仅适用于 Chrome (12),即不适用于 Firefox 4、Opera 11 或 Safari (Win 7)。
将一个类附加到输入类型。并在那里显示消息。希望在进行少量定制后有所帮助。工作代码笔:
document.querySelector('#frm').addEventListener('submit', e => {
e.preventDefault();
e.currentTarget.classList.add('submitted');
});
body {
font-family: Helvetica, sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
width: 100%;
height: 100vh;
background: #ffa500;
}
form > div {
position: relative;
margin-bottom: 10px;
}
.theTooltip {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: opacity, visibility;
max-width: 250px;
border-radius: 5px;
background-color: rgba(0,0,0,0.7);
padding: 15px;
color: #fff;
box-sizing: border-box;
display: inline-block;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate(15%, -50%);
transform: translate(15%, -50%);
top: 50%;
left: auto;
right: auto;
bottom: auto;
visibility: hidden;
margin: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
z-index: 100;
}
.theTooltip:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
margin-top: -10px;
left: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid rgba(0,0,0,0.7);
}
label {
display: inline-block;
vertical-align: center;
}
input {
background: #fff;
border: 1px solid transparent;
cursor: pointer;
display: inline-block;
overflow: visible;
margin: 0;
outline: 0;
vertical-align: center;
text-decoration: none;
width: auto;
border-radius: 3px;
cursor: text;
padding: 7px;
}
input:focus,
input:active {
outline: none;
}
.submitted input:invalid {
border: 1px solid #f00;
}
.submitted input:invalid ~ .theTooltip {
visibility: visible;
opacity: 1;
}
.submitted input:valid ~ .theTooltip {
-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
transition: opacity 0.3s, visibility 0s 0.3s;
}
<form id="frm" action="action">
<div>
<label>Email</label>
<input type="email" required="required"/><span class="theTooltip">Invalid email</span>
</div>
<div>
<button formnovalidate="formnovalidate">OK</button>
</div>
</form>
我知道这是一个相当老的问题,但我发现了这个库,我认为这可能对其他发现这个问题的人有益。