Beispiel:CSS grundlagen in-range.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Formular 13 - Altersabfrage mit min und max</title> <style>
input:in-range { background-color: rgb(0 255 0 / 0.25); }
input:out-of-range { background-color: rgb(255 0 0 / 0.25); border: medium solid red; }
input:in-range +::after { content: ' ✔'; }
input:out-of-range +::after { content: ' außerhalb des Bereichs!'; }
form { display: grid; grid-template-columns: 15em 10em 10em; padding: 1em;
label { grid-column: 1/2; text-align: right; line-height: 1.5; } input { margin: 0 1em 1em .5em; padding: .2em .5em; background-color: #fffbf0; border: thin solid #e7c157; } button {
margin-top: 1.5em; width: fit-content;
}
}
label::after {
content: ": ";
}
</style>
</head>
<body>
Altersabfrage mit min und max
<form> <label for="alter">Ihr Alter ist: </label> <input id="alter" name="altersangabe" type="number" min="16" max="99" value="">
<button type="submit">Absenden</button>
</form>
Die Altersabfrage wird durch die Pseudoklassen <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Pseudoklasse#:in-range_und_:out-of-range">:in-range und :out-of-range</a> gekennzeichnet.
Da das input-Element kein Pseudoelement erlaubt, muss ein leeres span hinzugefügt werden.
Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/Formulare/Benutzereingaben_zug%C3%A4nglich_gestalten#Browsereigene_Validierung">Formulare Browsereigene Validierung</a>.
<a href="https://forum.selfhtml.org/advent/2024">Zurück zum
Adventskalender 2024.
</body> </html>
