Html 覆盖 html5 表单验证/必需弹出窗口的 css

override css for html5 form validation/required popup

提问by Phill Pafford

How can I override the default popup for a required field on a HTML5 form?

如何覆盖 HTML5 表单上必填字段的默认弹出窗口？

Example: http://jsfiddle.net/uKZGp/(make sure you click the submit button to see the popup)

示例：http: //jsfiddle.net/uKZGp/（确保单击提交按钮以查看弹出窗口）

The HTML

HTML

<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>

NOTE: You must view this with a HTML5 browser like Google Chrome or FireFox.

注意：您必须使用 HTML5 浏览器（如 Google Chrome 或 FireFox）查看此内容。

This link doesn't solve my question but it might make someone think outside of the box:

此链接不能解决我的问题，但它可能会让某人跳出框框思考：

• http://www.the-art-of-web.com/html/html5-form-validation/
• http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html

• http://www.the-art-of-web.com/html/html5-form-validation/
• http://adhocery.blogspot.com/2011/03/styling-with-html5-form-validation.html

采纳答案by Zakaria

It's impossible to change the validation style with only HTML5/CSS3.

仅使用 HTML5/CSS3 无法更改验证样式。

It's part of the browser. The only attribute I figured out to change is the error message by using this example:

它是浏览器的一部分。我发现要更改的唯一属性是使用此示例的错误消息：

 document.getElementById("name").setCustomValidity("Lorum Ipsum");

But, as shown in this example : http://jsfiddle.net/trixta/qTV3g/, you can override the panel style by using jQuery. This is not a plugin, it's a core functionality, uses a DOM lib called Webshimsand, of course, some CSS to style the popups.

但是，如本例所示：http: //jsfiddle.net/trixta/qTV3g/，您可以使用 jQuery 覆盖面板样式。这不是插件，而是核心功能，使用名为Webshims的 DOM 库，当然还有一些 CSS 来设计弹出窗口的样式。

I found that very useful example in this bug posttitled Improve form validation error panel UI.

我发现这个是非常有用的例子错误后标题Improve form validation error panel UI。

I think this is the best solution you can find and only way to override the basic (ugly) error panel.

我认为这是您能找到的最佳解决方案，也是覆盖基本（丑陋）错误面板的唯一方法。

Regards.

问候。

回答by tengen

I'm not sure why, but ::-webkit-validation-bubble-message { display: none; }wouldn't work for me. I was able to get the desired result (tested in FF 19, Chrome Version 29.0.1547.76 m) by preventing the default behavior of the invalid event, which does not bubble.

我不确定为什么，但::-webkit-validation-bubble-message { display: none; }对我不起作用。通过阻止不会冒泡的无效事件的默认行为，我能够获得所需的结果（在 FF 19，Chrome 版本 29.0.1547.76 m 中测试）。

  document.addEventListener('invalid', (function(){
      return function(e){
          //prevent the browser from showing default error bubble/ hint
          e.preventDefault();
          // optionally fire off some custom validation handler
          // myvalidationfunction();
      };
  })(), true);

Hope that helps others - I looked everywhere for this.

希望能帮助其他人 - 我到处寻找这个。

回答by umpirsky

For webkit, you can use ::-webkit-validation-bubble-message. For example to hide it:

对于 webkit，您可以使用::-webkit-validation-bubble-message. 例如隐藏它：

::-webkit-validation-bubble-message { display: none; }

There are also:

还有：

::-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{}

Update:Chrome does not allow styling form validation bubbles anymore: https://code.google.com/p/chromium/issues/detail?id=259050

更新：Chrome 不再允许样式化表单验证气泡：https: //code.google.com/p/chromium/issues/detail?id =259050

For firefox you can experiment with :-moz-placeholder {}.

对于 Firefox，您可以尝试使用:-moz-placeholder {}.

回答by ajcw

The current default email validation is currently one of the ugliest things I have ever seen Google design!

当前默认的电子邮件验证是目前我见过的 Google 设计中最丑陋的东西之一！

However it seems to be contained in a standard divso you can make some changes to it, if you remember to then reset these values.

但是，它似乎包含在标准中，div因此您可以对其进行一些更改，如果您记得重置这些值。

I've found you can alter the background, font size and colour, border and shadow, like so

我发现你可以像这样改变背景、字体大小和颜色、边框和阴影

div {
    background: rgba(0,0,0,0.8);
    color: #333;
    font-size: 11px;
    border: 0;
    box-shadow: none;
}

If you then overwrite these for divs inside the html tag, then only the validation is ultimately affected.

如果你在 html 标签内为 div 覆盖这些，那么最终只有验证会受到影响。

html div {
    background: rgba(0,0,0,1);
    color: #000;
    font-size: 12px;
}

Unfortunately some of the key attributes that you'd want to change, such as marginand font-weight, cannot be altered.

不幸的是，您想要更改的某些关键属性（例如margin和font-weight）无法更改。

NB. This technique currently only works for Chrome (12), i.e. not work for Firefox 4, Opera 11 or Safari (Win 7).

注意。此技术目前仅适用于 Chrome (12)，即不适用于 Firefox 4、Opera 11 或 Safari (Win 7)。

回答by Bhawna Malhotra

Appended a class to the input type. and displayed message there .Hope that helps after little customization. working codepen:

将类附加到输入类型。并在那里显示消息。希望在很少定制后有所帮助。工作代码笔：

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>

回答by MB34

I understand that this is a rather old question but I have found this library that I think this may be beneficial to other that find this.

我知道这是一个相当古老的问题，但我发现这个库我认为这可能对其他发现它的人有益。

http://afarkas.github.io/webshim/demos/index.html

http://afarkas.github.io/webshim/demos/index.html