• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML-Pattern

T

TheCrazyMen

Guest
Hallo Helfender,

ich habe folgendes Problem, es gibt bei HTML (Input), den Befehl Pattern. Sollte dieser feststellen, dass die Eingabe nicht richtig ist, dann umrandet er das Eingabefeld rot. Genau das möchte ich aber nicht. Ist es möglich, dies abzustellen?

Vielen Dank für jede Hilfe!
 
Werbung:
Ja gibt es:
Neben CSS-Dingen wie :hover, :active, :focus etc., gibt es auch noch das ":invalid". Wenn also etwas :invalid ist, dann wende diese CSS styles an.
z.B.
HTML: 
<style>
.KeinRot:invalid {
    outline: none;
}
</style>
<form>
    <input class="KeinRot" type="text" name="DiesDas" pattern="[A-Za-z]{3}" title="Blabla">
</form>
 
Funktioniert nicht :/ Habe ich schon getestet, auch so wie Sie es geschrieben haben.
 
Werbung:
HTML: 
<input required
                             id="firstname"
                             class="KeinRot"
                             type="text"
                             value="Vorname"
                             placeholder="Vorname"
                             name="firstname"
                             pattern="[a-z]{3-16}"
                             onfocus="changeValue('Vorname', this);"
                             onblur="changeValue('Vorname', this);"/>

Code: 
#firstname{
  position: absolute;
  top: 220px;
  left: 225px;

  z-index: 2;
  cursor: pointer;
  color: grey;
  font-size: 1.25em;
  width: 150px;
  height: 40px;
  border-radius: 8px;
  border-color: grey;
  border-style: solid;
  padding-left: 10px;
}

.KeinRot:invalid {
   outline: none;
}
 
Ich habe es gerade mal ausprobiert und konnte bei keinem einen roten Rand feststellen, wenn ich das :invalid wegenommen habe, war der rote Rand, wie erwartet, da.
Ich habs bis jetzt mit:
Internet Explorer,
Microsoft Edge,
Google Chrome

probiert.
Mir fehlt immer noch die Info, welchen Browser du benutzt

@edit:
Achso es kann sein, dass du das für andere Browser kompatibel machen musst.
 
Werbung:
Okay. Auch das war innerhalb von 5 Sekunden gelöst. Ich hab den Browser installiert und du hattest recht. Der rote Rand war da.

Ich weiß nicht wie lange du schon bei html dabei bist (soll dich auch nicht angreifen), aber mir ist sofort aufgefallen, dass das wie ein box-shadow aussieht.
Also einfach noch den box-shadow auf "none" setzen. Fertig

Der Grund warum es bei mozilla nicht funktionierte war, dass alle Browser ein "outline" hinzufügen, während Mozilla einen "box-shadow" hinzufügt.
 
Vielen Dank für deine Hilfe! Funktioniert jetzt alles ^^

Kann geschlossen werden, wenn ich es selber schließen kann, dann ahbe ich keinen Plan ^^
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben