webentwicklung-frage-antwort-db.com.de

überschreiben Sie css für die html5-Formularüberprüfung/erforderliches Popup

Wie kann ich das Standard-Popup für ein erforderliches Feld in einem HTML5-Formular überschreiben? 

Beispiel: http://jsfiddle.net/uKZGp/ (Klicken Sie auf die Schaltfläche "Senden", um das Popup-Fenster zu sehen.)

Das HTML

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

HINWEIS: Sie müssen dies mit einem HTML5-Browser wie Google Chrome oder FireFox anzeigen.

Dieser Link löst meine Frage nicht, kann aber dazu führen, dass jemand außerhalb des Kastens denkt: 

49
Phill Pafford

Es ist nicht möglich, den Validierungsstil nur mit HTML5/CSS3 zu ändern.

Es ist Teil des Browsers. Das einzige Attribut, von dem ich herausgefunden habe, dass es sich ändert, ist die Fehlermeldung, die dieses Beispiel verwendet:

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

Wie in diesem Beispiel gezeigt: http://jsfiddle.net/trixta/qTV3g/ , können Sie den Bedienfeldstil mit jQuery überschreiben. Dies ist kein Plugin, es ist eine Kernfunktionalität, verwendet eine DOM-Bibliothek namens Webshims und natürlich einige CSS, um die Popups zu stylen.

Ich fand dieses sehr nützliche Beispiel in diesem Bug Post mit dem Titel Improve form validation error panel UI.

Ich denke, dass dies die beste Lösung ist, die Sie finden können, und die einzige Möglichkeit, die grundlegende (hässliche) Fehleranzeige zu überschreiben.

Grüße.

30
Zakaria

Ich bin nicht sicher warum, aber ::-webkit-validation-bubble-message { display: none; } würde für mich nicht funktionieren. Ich konnte das gewünschte Ergebnis erhalten (getestet in FF 19, Chrome-Version 29.0.1547.76m), indem ich das Standardverhalten des ungültigen Ereignisses verhindere, das nicht blubbert.

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

Ich hoffe, das hilft anderen - ich habe überall danach gesucht.

17
tengen

Für das Webkit können Sie ::-webkit-validation-bubble-message verwenden. Zum Beispiel, um es zu verbergen:

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

Es gibt auch:

::-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 lässt keine Formulierungsblasen für das Gestalten mehr zu: https://code.google.com/p/chromium/issues/detail?id=259050

Für Firefox können Sie mit :-moz-placeholder {} experimentieren.

11
umpirsky

Die derzeitige Standard-E-Mail-Validierung ist derzeit eines der hässlichsten Dinge, die ich je gesehen habe.

Chrome HTML5 email type form validation

Es scheint jedoch in einem Standard div enthalten zu sein, so dass Sie einige Änderungen daran vornehmen können, wenn Sie daran denken, diese Werte dann zurückzusetzen.

Ich habe festgestellt, dass Sie den Hintergrund, die Schriftgröße und -farbe, den Rand und den Schatten wie gewünscht ändern können

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

Wenn Sie diese dann für divs innerhalb des html-Tags überschreiben, ist letztendlich nur die Validierung betroffen.

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

Leider können einige der wichtigsten Attribute, die Sie ändern möchten, wie margin und font-weight, nicht geändert werden.

NB. Diese Technik funktioniert derzeit nur für Chrome (12), d. H. Nicht für Firefox 4, Opera 11 oder Safari (Win 7).

4
ajcw

Eine Klasse wurde an den Eingabetyp angehängt. und dort angezeigte Nachricht. Hoffentlich hilft das nach ein wenig Anpassung. Arbeitscode:

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>

2
Bhawna Malhotra

Ich verstehe, dass dies eine ziemlich alte Frage ist, aber ich habe diese Bibliothek gefunden, von der ich denke, dass dies für andere von Vorteil sein kann, die dies finden.

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

0
MB34