CSS - Warna penekan: Menambah Kesan Personal ke Form Anda

Hai sana, para ahli CSS masa depan! Hari ini, kita akan mendalami properti kecil yang menyenangkan ini yang dapat menambah sentuhan magis ke form Anda. Properti ini disebut accent-color, dan itu seperti memberikan ceklis, tombol radio, dan elemen form lainnya outfit baru yang mewah. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita berangkat ke perjalanan berwarna ini bersama!

Apa itu accent-color?

Sebelum kita melompat ke detil, mari pahami apa yang dimaksud oleh accent-color. Bayangkan Anda sedang menghias kamar Anda, dan Anda ingin menambahkan sentuhan warna yang mengikat semua itu bersama. Itu tepat apa yang accent-color lakukan untuk form web Anda!

Properti accent-color memungkinkan Anda mengubah warna beberapa kontrol antarmuka pengguna di form web Anda. Itu seperti memberikan elemen form Anda make-over tanpa kesulitan gaya yang kompleks.

Nilai yang Mungkin

Sekarang, mari kita lihat nilai yang berbeda yang Anda dapat gunakan dengan accent-color. Itu seperti memilih dari palet warna untuk elemen form Anda!

Nilai	Deskripsi
auto	Browser menentukan warna penekan (default)
	Setiap nilai warna CSS yang valid
inherit	Mewarisi warna penekan dari elemen induk
initial	Mengatur warna penekan ke nilai defaultnya
revert	Mengembalikan warna penekan ke gaya default browser
unset	Menghapus warna penekan yang telah diatur sebelumnya

Terapkan Pada

Tidak semua elemen HTML diundang ke pesta warna ini. Properti accent-color agak selektif dan hanya bekerja dengan beberapa elemen form. Berikut adalah daftar tamu:

• <input type="checkbox">
• <input type="radio">
• <input type="range">
• <progress>

Sintaks

Sintaks untuk accent-color sangat sederhana. Itu seperti menulis catatan pendek dan manis ke CSS Anda:

elemen {
accent-color: nilai;
}

mari kitauraikan ini dengan beberapa contoh, ya?

CSS accent-color - nilai auto

input[type="checkbox"] {
accent-color: auto;
}

Dalam contoh ini, kita mengatakan ke browser, "Hey, Anda yang memutuskan warna untuk ceklis ini!" Itu seperti membiarkan teman seni Anda memilih skema warna untuk pesta Anda.

CSS accent-color -

Sekarang, mari kita tambahkan sedikit keanehan dengan warna spesifik:

input[type="radio"] {
accent-color: #FF5733;
}

Kode ini seperti mengatakan, "Catkan semua tombol radio saya dengan warna jeruk yang cerah ini!" Itu adalah cara yang bagus untuk mencocokkan elemen form Anda dengan tema situs web Anda.

Anda dapat menggunakan nilai warna CSS apa pun di sini - warna dinamai, heksadesimal, RGB, atau bahkan nilai HSL. Mari kita coba beberapa lagi:

input[type="checkbox"] {
accent-color: biru;
}

input[type="range"] {
accent-color: rgb(0, 255, 0);
}

progress {
accent-color: hsl(300, 100%, 50%);
}

Dalam contoh ini, kita memberikan ceklis penampilan biru klasik, penggeser warna hijau cerah, dan batang kemajuan hue ungu. Itu seperti memberikan setiap elemen keunikannya sendiri!

CSS accent-color Dengan Elemen HTML Berbeda

Mari lihat bagaimana accent-color bekerja kesana-kemari dengan elemen form berbeda:

Ceklis

<input type="checkbox" id="setuju" name="setuju">
<label for="setuju">Saya setuju dengan syarat dan ketentuan</label>

input[type="checkbox"] {
accent-color: #4CAF50;
}

Ini akan memberikan ceklis warna hijau menyenangkan ketika dicentang. Itu seperti memberikan pengguna Anda lampu hijau kecil setiap kali mereka menyetujui!

Tombol Radio

<input type="radio" id="ya" name="jawaban" value="ya">
<label for="ya">Ya</label>
<input type="radio" id="tidak" name="jawaban" value="tidak">
<label for="tidak">Tidak</label>

input[type="radio"] {
accent-color: #FF5733;
}

Tombol radio Anda sekarang akan memakai warna jeruk cerah. Itu seperti menambahkan Matahari kecil ke form Anda!

Penggeser

<input type="range" id="volume" name="volume" min="0" max="100">

input[type="range"] {
accent-color: #3498DB;
}

Ini akan memberikan penggeser warna biru dingin. Itu seperti geser melintasi langit biru!

Batang Kemajuan

<progress id="file" max="100" value="70"> 70% </progress>

progress {
accent-color: #9B59B6;
}

Batang kemajuan Anda sekarang akan bercahaya dalam warna ungu kerajaan. Itu seperti menonton batang loading berwarna anggur!

Menggabungkan Semua

Sekarang kita telah mengeksplorasi setiap elemen secara individual, mari kita buat form yang menggunakan accent-color pada beberapa elemen:

<form>
<input type="checkbox" id="berlangganan" name="berlangganan">
<label for="berlangganan">Berlangganan ke buletin</label>

<fieldset>
<legend>Cara hubungan yang disukai:</legend>
<input type="radio" id="email" name="kontak" value="email">
<label for="email">Email</label>
<input type="radio" id="telepon" name="kontak" value="telepon">
<label for="telepon">Telepon</label>
</fieldset>

<label for="kepuasan">Tingkat kepuasan:</label>
<input type="range" id="kepuasan" name="kepuasan" min="0" max="100">

<label for="unggah">Progres unggah file:</label>
<progress id="unggah" max="100" value="75"> 75% </progress>
</form>

form {
font-family: Arial, sans-serif;
max-width: 300px;
margin: 0 auto;
}

input[type="checkbox"] {
accent-color: #4CAF50;
}

input[type="radio"] {
accent-color: #FF5733;
}

input[type="range"] {
accent-color: #3498DB;
}

progress {
accent-color: #9B59B6;
width: 100%;
}

Dalam contoh ini, kita telah membuat form berwarna yang menampilkan setiap jenis elemen dengan warna penekan uniknya. Itu seperti mengorganisir festival kecil warna di halaman web Anda!

Kesimpulan

Dan begitu saja, teman-teman! Kita telah mengeksplorasi dunia menyenangkan accent-color di CSS. Dari ceklis hingga batang kemajuan, kita telah melihat bagaimana properti ini dapat menambah sentuhan personal ke form Anda.

Ingat, meskipun accent-color adalah alat yang bagus untuk gaya cepat dan mudah, penting untuk menggunakannya bijaksana. Pastikan warna yang Anda pilih menjaga kontras dan aksesibilitas bagi semua pengguna.

Sekarang giliran Anda untuk mencoba! Cobalah warna yang berbeda, campur dan cocokkan dengan tema situs web Anda, dan terutama, bersenang-senanglah dengannya. Setelah semuanya, pengodingan adalah tentang kreativitas dan ekspresi.

Selamat coding, dan semoga form Anda selalu berwarna!

Credits: Image by storyset