So stylst du Formulare mit accent-color (CSS)

von Eric-Oliver Mächler | Juni 9, 2025 | Design | 0 Kommentare

Schlagwörter: CSSCSS3HTML

Inhaltsverzeichnis

Heute zeige ich euch ein kleinen CSS Befehl mit dem ihr eine Check Box, ein Radio Button und ein Slide Range eines Formular umfärben könnt.

Dieser kleiner CSS Befehl kennen viele noch nicht, er er leichtert aber das Leben eines Webdesigners sehr.

Video

HTML

<div class="container">
      <div class="box">
        <input
          type="checkbox"
          id="transport1"
          name="transport1"
          value="Fahrrad"
        />
        <label for="transport1"> Ich habe ein Fahrrad</label><br />
        <input type="checkbox" id="transport2" name="transport2" value="Auto" />
        <label for="transport2"> Ich habe ein Auto</label><br />
        <input type="checkbox" id="transport3" name="transport3" value="Boot" />
        <label for="transport3"> Ich habe ein Boot</label><br />
      </div>
      <div class="box">
        <input type="radio" id="html" name="sprache" value="HTML" />
        <label for="html">HTML</label><br />
        <input type="radio" id="css" name="sprache" value="CSS" />
        <label for="css">CSS</label><br />
        <input type="radio" id="javascript" name="sprache" value="JavaScript" />
        <label for="javascript">JavaScript</label>
      </div>
      <div class="box">
        <label for="volume">Volume</label>
        <input type="range" id="volume" name="volume" min="0" max="50" />
      </div>
    </div>
</div>

CSS

input {
  accent-color: #ff4800;
}

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert