Formulir yang Konsisten dengan Brand

Fitur web: accent-color

Menyesuaikan elemen formulir HTML standar seperti kotak centang dan tombol pilihan secara historis sulit dilakukan. Developer sering kali dihadapkan pada pilihan antara menggunakan default browser atau membuat komponen kustom dari awal. Membuat kontrol kustom memerlukan waktu yang lama dan dapat dengan mudah menyebabkan masalah aksesibilitas atau status yang hilang (seperti status tidak tentu untuk kotak centang).

Properti CSS accent-color memberikan cara sederhana untuk menerapkan warna merek Anda ke input formulir HTML bawaan dengan satu baris CSS, tanpa mengorbankan aksesibilitas atau fitur browser bawaan.

Cara Menerapkan

Untuk menerapkan warna merek ke kontrol formulir:

  1. Identifikasi warna brand Anda: Pilih warna yang mewakili brand Anda.
  2. Terapkan properti accent-color: Tambahkan accent-color ke elemen atau elemen penampung (seperti body atau formulir tertentu) di CSS Anda.
  3. Mendukung Mode Gelap (Opsional, tetapi Direkomendasikan): Gunakan color-scheme untuk memberi tahu browser bahwa situs Anda mendukung mode gelap, dan sesuaikan accent-color jika perlu untuk kontras yang lebih baik.

Contoh Kode: Kontrol Formulir yang Konsisten dengan Merek

: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>

Penerapan Strategis & Praktik Terbaik

  • LAKUKAN penggunaan accent-color untuk menerapkan tema pada kontrol formulir dengan mudah agar sesuai dengan merek Anda.
  • JANGAN percaya begitu saja pada browser untuk menangani kontras. Meskipun browser seharusnya otomatis menentukan warna kontras yang memenuhi syarat, bug yang diketahui dalam implementasi seperti Safari (bug WebKit 244233) dan Android Chrome (bug Chromium 343503163) dapat gagal membalikkan warna tanda centang, sehingga menyebabkan kontrol tidak terlihat atau sulit dilihat saat menggunakan warna yang tidak memiliki kontras yang memadai terhadap latar belakang (misalnya, warna terang dalam mode terang, atau warna gelap dalam mode gelap).
  • LAKUKAN penggabungan accent-color dengan color-scheme: light dark untuk memastikan kontrol formulir terlihat bagus dalam tema terang dan gelap.
  • JANGAN gunakan warna yang terlalu mirip dengan warna latar belakang. Meskipun browser mencoba menjamin kontras, sebaiknya berikan warna dengan kontras dasar yang baik.
  • JANGAN berasumsi bahwa accent-color berfungsi di semua elemen formulir. Saat ini, atribut ini hanya memberi tint pada elemen checkbox, radio, range, dan progress.

Strategi Penggantian

Untuk browser yang tidak mendukung accent-color, kontrol formulir akan kembali ke tampilan default browser. Untuk memastikan konsistensi merek yang lengkap dan keandalan yang tinggi di semua lingkungan, Anda HARUS menerapkan strategi penggantian kustom menggunakan teknik "input yang disembunyikan secara visual" yang sudah ada.

Progressive Enhancement dengan @supports not

Anda HARUS menggunakan aturan @supports not untuk menerapkan gaya penggantian kustom hanya jika accent-color tidak didukung. Hal ini memastikan Anda memanfaatkan kemudahan accent-color untuk browser modern sekaligus menjamin pengalaman bermerek yang konsisten untuk browser lama.

1. Struktur HTML

Pastikan label Anda menggabungkan teks dalam <span> untuk memungkinkan pemilih yang setara di CSS:

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

2. Penggantian CSS

Terapkan gaya kustom dalam blok @supports not:

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

Progres Rentang Dinamis di Penggantian Webkit

Untuk membuat pengisian progres bergerak bersama thumb pada penggeser rentang di browser Webkit (tanpa accent-color), Anda dapat menggunakan variabel CSS dan sedikit JavaScript.

  1. Perbarui CSS: Gunakan variabel CSS untuk perhentian gradien:

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

  2. Tambahkan JavaScript: Perbarui variabel pada peristiwa input:

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