bUTschy.de

  • code

CSS3 und :valid

Nun meckert der W3C CSS Validierungsdienst von wegen:

Entschuldigung! Es wurden die folgenden Fehler gefunden

  1. Unbekanntes Pseudoelement oder Pseudoklasse: :required
  2. Unbekanntes Pseudoelement oder Pseudoklasse: :valid

Momentan stehe ich echt auf dem Schlauch und finde keine valide Lösung.

Angefangen habe ich mit diesen Zeilen

input:required:focus:valid {
border-color: green;
}
textarea:required:focus:valid {
border-color: green;
}

Wer sich etwas mit CSS auskennt, sieht was ich damit vorhabe.

Den "required" Teil bekomme ich alleine ohne Probleme Valide:

input[required]

Aber was mache ich nun mit :valid :(

  • 2 Kommentare
  • 4415 Klicks

Kommentare

Hinzufügen

AvatarHarry Milatz

Hi Roland,

da ich vor dem gleichen Problem stand, bin ich über Google auf dieser Seite gelandet. Eine echte valide CSS-Lösung habe ich auch nicht gefunden. Aber ich habe es mit ein wenig jQuery gelöst. Ich lade das CSS erst bei Klick auf dem Kommentarfeld:
<script>
jQuery(document).ready(function(){
jQuery("textarea#comment"😉️.click(function()
{
addcssrule(jQuery('input#author, input#email, textarea#comment'😉️);
function addcssrule(target)
{
var cssrules = jQuery("<style type='text/css'> </style>"😉️.appendTo("head"😉️;
cssrules.append('input:required, textarea:required {dein css} input:focus:invalid, textarea:focus:invalid{dein css} input:valid, textarea:valid {dein css}'😉️;
}

});

});
</script>

Ich hoffe das hilft dir weiter auch wenn dein Artikel schon was älter ist😉️
Gruss Harry

AvatarbUTschy

hi Harry,
vielen Dank für Kommentar.
Ich möchte nur ungern JS einsetzen müssen um diese "kleine" Invalidität zu beheben, da muss es doch von Seiten des W3C eine Lösung geben.

Kommt vielleicht noch 😉️

🙂 😃 😀 😝 😇 😉 😋 😎 🤔 🙄 🙁 😕 😴 😧 😠 😢 😡

Weitere