CSS - Fehleingaben in Formularen mit CSS hervorheben

    Werte zwischen 1 und 10 sind gültig.

<style>

li {
  list-
stylenone;
  
margin-bottom1em;
}

input {
  
border1px solid black;
}

input:in-range {
  
background-colorrgba(025500.25);
}

input:out-of-range {
  
background-colorrgba(255000.25);
  
border2px solid red;
}

input:in-range label::after {
  
content'OK.';
}

input:out-of-range label::after {
  
content'fehlerhaft!';
}
</
style>


<
form  id="form1">
  <
ul>Werte zwischen 1 und 10 sind gültig.
    <
li>
      <
input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
      <
label for="value1">Ihre Eingabe ist </label>
    </
li>
  </
ul>
</
form>

Siehe auch: JavaScript - Zahl in einem Eingabefeld mit dem Mausrad verändern

Bausteine  [Alle Anzeigen]

Eine zufällige Auswahl von Bausteinen (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Text mit gestreiftem Hintergrund

PHP - Kalenderwoche anzeigen

JavaScript - Ein farbig blinkender Text

MySQL - Datenbank-Abfrage über den URL-Parameter