✔ select:focus(out) ****?

[k3nguruh]

Hallo,

mit diesen CSS gebe ich den verschiedenen Feldern, sofern der Focus auf das Feld kommt, einen roten Rand

input[type="text"]:focus, input[type="password"]:focus,
select:focus,
textarea:focus {
    border: 1px solid red;
}

/* Felder bei denen ein Fehler auftritt */
input.error-field,
select.error-field,
textarea.error-field {
    border: 1px solid red;
}

Frage: Gibt es auch sowas, wo beim verlassen des Focus von dem Feld, eine andere Randfarbe gegeben werden kann (ohne JavaScript)?

Warum meine Frage?
Ich versende ein Formular und es kommt zu einem Fehler, wird dem Feld eine Randfarbe X gegeben. Jetzt ändert man das Feld ab und nimmt noch Änderungen an einem anderen Feld vor. Leider bleibt aber bei dem "Fehlerfeld" jetzt auch noch der Rahmen.

Ich hoffe es verständlich erklärt zu haben

 

[Jonas Geißinger]

hallo kenguruh2002,
kannst du das nicht machen, indem du in das input feld noch ein ' required' machst und dann mit css prüfen ob input:valid oder input:invalid ist und bei da dann den entsprechenden rahmen setzt****

 

[hela]

Hallo,

wenn ich das richtig verstehe, dann wird im Fehlerfall an das betreffende INPUT-Element das Klassenattribut "error-field" (vermutlich per Javascript) vergeben. Wenn das wirklich so sein sollte, dann musst du per Javascript diesen Klassennamen aus dem Attribut wieder löschen, wenn im fehlerhaften INPUT-Feld etwas verändert wird.

 

[k3nguruh]

@Jonas Geißinger: mmhh, mit deiner Antwort kann ich leider nichts anfangen. Bin noch etwas neu in der "Szene".

@hela: es wird nicht per Javascript geprüft. Es ist eine PHP Datei. Nach dem Absenden, werden die verschiedenen Eingaben geprüft. Zum Bsp. bei einem Betrag, ob es LEER ist, ob der Betrag stimmen kann (Punkt statt Komma), ob der Betrag mit 2 Nullen (001.30) beginnt,.... Ist dann ein Fehler, wird das Formular mit den gesendeten Daten nochmal aufgerufen und das / die Felder die nicht übereinstimmen, bekommen per CSS die class Anweisung (roten Rahmen) übergeben.

am Bsp. sieht das Feld so aus

<div class="field"><input{insert.E_KOSTEN} style="width: 70px;" id="kosten" type="text" name="kosten" value="{insert.S_KOSTEN}" maxlength="10"{insert.D_KOSTEN} />&nbsp;Euro / (Einsatz)Minute</div>

ist ein Fehler wird {insert.E_KOSTEN} zu class="error-field", ansonsten ist es duch das Template-System leer und wird nicht angezeigt / nichts eingetragen.

 

[DeluXe]

Nur per CSS kannst du das nicht machen, du wirst die Klasse per JavaScript entfernen müssen.

 

[k3nguruh]

OK, danke.

Habe bis jetzt auch nichts gefunden. Werd diesen Thread als erledigt setzen.