Formulieren die bij je merk passen

Webfuncties: accent-color

Het aanpassen van standaard HTML-formulierelementen zoals selectievakjes en keuzerondjes was in het verleden moeilijk. Ontwikkelaars moesten vaak kiezen tussen de standaardinstellingen van de browser gebruiken of helemaal zelf aangepaste componenten maken. Het maken van aangepaste bedieningselementen kost veel tijd en kan makkelijk leiden tot toegankelijkheidsproblemen of ontbrekende statussen (zoals de onbepaalde status voor selectievakjes).

De CSS-property accent-color biedt een eenvoudige manier om je merkkleur met één regel CSS toe te voegen aan ingebouwde HTML-formulierinvoer, zonder dat dit ten koste gaat van de toegankelijkheid of ingebouwde browserfuncties.

Implementeren

Zo pas je je merkkleur toe op formulierbedieningselementen:

  1. Bepaal uw merkkleur: Kies een kleur die uw merk vertegenwoordigt.
  2. Pas de property accent-color toe: Voeg accent-color toe aan het element of een containerelement (zoals body of een specifiek formulier) in uw CSS.
  3. Ondersteuning voor de donkere modus (optioneel maar aanbevolen): Gebruik color-scheme om de browser te laten weten dat je site de donkere modus ondersteunt en pas de accent-color zo nodig aan voor een beter contrast.

Voorbeeldcode: formulierbedieningselementen die consistent zijn met het merk

:root {
  --brand-color: #6200ee;
}

/* Apply accent-color to the body or a specific container */
body {
  accent-color: var(--brand-color);
}

/* Optional: Adjust for dark mode if needed */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-color: #bb86fc; /* A lighter shade for dark mode */
  }
}

<form>
  <!-- Checkbox -->
  <label for="subscribe">
    <input type="checkbox" id="subscribe" checked>
    Subscribe to newsletter
  </label>

  <!-- Radio Buttons -->
  <label for="plan-monthly">
    <input type="radio" id="plan-monthly" name="plan" value="monthly">
    Monthly
  </label>
  <label for="plan-yearly">
    <input type="radio" id="plan-yearly" name="plan" value="yearly" checked>
    Yearly
  </label>

  <!-- Range Slider -->
  <label for="volume">Volume:</label>
  <input type="range" id="volume" min="0" max="100" value="70">

  <!-- Progress Bar -->
  <label for="file">Upload Progress:</label>
  <progress id="file" max="100" value="70">70%</progress>
</form>

Strategische implementatie en best practices

  • Gebruik WEL accent-color om formulierfuncties makkelijk aan te passen aan je merk.
  • Vertrouw er NIET blindelings op dat de browser het contrast goed verwerkt. Browsers horen automatisch een geschikte contrastkleur te bepalen, maar bekende bugs in implementaties zoals Safari (WebKit-bug 244233) en Android Chrome (Chromium-bug 343503163) kunnen ervoor zorgen dat de kleuren van vinkjes niet worden omgekeerd. Dit leidt tot onzichtbare of moeilijk zichtbare bedieningselementen als je kleuren gebruikt die onvoldoende contrast hebben met de achtergrond (bijvoorbeeld lichte kleuren in de lichte modus of donkere kleuren in de donkere modus).
  • Combineer WEL accent-color met color-scheme: light dark om te zorgen dat formulierbediening er goed uitziet in zowel lichte als donkere thema's.
  • Gebruik GEEN kleur die te dicht bij de achtergrondkleur ligt. Hoewel browsers proberen contrast te garanderen, kun je het beste een kleur met een goed basiscontrast gebruiken.
  • Ga er NIET van uit dat accent-color werkt op alle formulierelementen. Op dit moment worden alleen de elementen checkbox, radio, range en progress getint.

Reservestrategie

Voor browsers die accent-color niet ondersteunen, vallen de formulierbedieningselementen terug op de standaardweergave van de browser. Als je volledige merkconsistentie en hoge betrouwbaarheid in alle omgevingen wilt garanderen, MOET je een aangepaste fallback-strategie implementeren met de gevestigde techniek voor visueel verborgen invoer.

Progressive enhancement met @supports not

U MOET de regel @supports not gebruiken om aangepaste reservestijlen alleen toe te passen als accent-color niet wordt ondersteund. Zo kunt u de eenvoud van accent-color gebruiken voor moderne browsers en tegelijkertijd een consistente merkbeleving garanderen voor oudere browsers.

1. HTML-structuur

Zorg dat uw labels de tekst in een <span> plaatsen om sibling-selectors in CSS toe te staan:

<label for="subscribe-fallback">
  <input type="checkbox" id="subscribe-fallback" class="visually-hidden" checked>
  <span>Subscribe to newsletter</span>
</label>

2. CSS-reserve

Pas aangepaste stijlen toe binnen een @supports not-blok:

/* Fallback for older browsers without accent-color */
@supports not (accent-color: var(--brand-color)) {
  /* Visually hide the native input using the canonical accessible recipe */
  form input[type="checkbox"].visually-hidden {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  /* Style the wrapper label */
  label {
    position: relative;
    padding-left: 2rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }

  /* Custom box for checkbox */
  input[type="checkbox"] + span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid #ccc;
    background: white;
    border-radius: 4px;
    box-sizing: border-box;
    transition: all 0.2s ease;
  }

  /* Ensure custom checkbox shows focus for keyboard users */
  input[type="checkbox"]:focus-visible + span::before {
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  /* Checked State */
  input[type="checkbox"]:checked + span::before {
    background-color: var(--brand-color, #6200ee);
    border-color: var(--brand-color, #6200ee);
  }

  /* Checkmark (Unicode) */
  input[type="checkbox"]:checked + span::after {
    content: "✓";
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
  }

  /* Fallback for Range Slider */
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }

  /* Webkit (Chrome, Safari, Edge) */
  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    /* Use gradient to show progress for a static value (e.g., 70%) or update with JS */
    background: linear-gradient(to right, var(--brand-color, #6200ee) 70%, #ccc 70%);
    border-radius: 4px;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--brand-color, #6200ee);
    cursor: pointer;
    margin-top: -4px; /* Center vertically */
  }

  /* Firefox */
  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #ccc;
    border-radius: 4px;
  }

  input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--brand-color, #6200ee);
    cursor: pointer;
  }

  /* Firefox specific progress bar */
  input[type="range"]::-moz-range-progress {
    background-color: var(--brand-color, #6200ee);
    height: 8px;
    border-radius: 4px;
  }

  /* Fallback for Progress Bar */
  progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: #ccc;
    height: 8px;
    border-radius: 4px;
  }

  progress::-webkit-progress-bar {
    background-color: #ccc;
    border-radius: 4px;
  }

  progress::-webkit-progress-value {
    background-color: var(--brand-color, #6200ee);
    border-radius: 4px;
  }

  progress::-moz-progress-bar {
    background-color: var(--brand-color, #6200ee);
    border-radius: 4px;
  }
}

Voortgang van dynamisch bereik in Webkit-reserveoptie

Als je de voortgangsvulling wilt laten meebewegen met de duim op een bereikschuifregelaar in Webkit-browsers (zonder accent-color), kun je een CSS-variabele en een kleine hoeveelheid JavaScript gebruiken.

  1. CSS updaten: Gebruik een CSS-variabele voor de kleurovergangstop:

    input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--brand-color) var(--progress, 0%), #ccc var(--progress, 0%));
}

  2. JavaScript toevoegen: Update de variabele voor de gebeurtenis input:

if (!CSS.supports('accent-color')) {
  const slider = document.getElementById('volume');
  slider.addEventListener('input', (e) => {
    e.target.style.setProperty('--progress', `${e.target.value}%`);
  });
}