So stylst du Formulare mit accent-color (CSS)

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;
}