Menu Pilihan dan Kotak Tandaan
Gayakan menu lungsur pilihan natif dan kotak tandaan, serta gunakan pemalam @tailwindcss/forms untuk menyeragamkan gaya borang merentas pelayar.
Menu Pilihan dan Kotak Tandaan ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Cabaran Kawalan Borang Asli
Elemen asli <select>, <checkbox> dan <radio> terkenal sukar digayakan secara konsisten merentas pelayar. Secara lalai, elemen ini mewarisi penampilan sistem pengendalian menggunakan sifat CSS appearance, yang ditetapkan semula oleh Tailwind dengan utiliti appearance-none.
Selepas penampilan asli dibuang, anda memperoleh kawalan penuh terhadap penggayaan. Pemalam @tailwindcss/forms mengautomasikan penetapan semula ini untuk semua elemen borang, lalu memberikan asas merentas pelayar yang bersih tanpa perlu menambahkan appearance-none secara manual di setiap tempat.
<!-- Without plugin: manual appearance reset needed -->
<select class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-lg">
<option>Option A</option>
</select>
<!-- With @tailwindcss/forms plugin: already normalized -->
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg">
<option>Option A</option>
</select>Menggayakan Menu Pilihan
Pilihan yang digayakan menggunakan kelas asas yang sama seperti input teks: w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white. Tambahkan anak panah menu pilihan tersuai dengan meletakkan imej SVG latar belakang atau melapisi ikon SVG yang diletakkan secara mutlak.
Keadaan fokus menggunakan focus:outline-none focus:ring-2 focus:ring-blue-500 yang biasa. Tambahkan cursor-pointer supaya kursor tetikus menunjukkan bahawa klik akan membuka menu.
<div class="relative">
<select
class="w-full appearance-none px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg cursor-pointer
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="de">Germany</option>
</select>
<!-- Custom dropdown arrow -->
<div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</div>
</div>Memasang Pemalam Borang
Pemalam @tailwindcss/forms menyediakan penetapan semula berpendirian untuk semua elemen borang asli. Pasangkannya dengan npm install -D @tailwindcss/forms dan tambahkan pada tatasusunan plugins dalam tailwind.config.js.
Selepas dipasang, semua input, pilihan, kawasan teks, kotak pilihan dan butang radio menerima gaya asas yang konsisten. Anda kemudian boleh menindihkan utiliti Tailwind tanpa perlu melawan tetapan lalai pelayar. Gunakan require('@tailwindcss/forms')({ strategy: 'class' }) jika anda mahu pemalam hanya digunakan apabila anda menambahkan kelas tertentu.
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
// Or with class strategy:
// require('@tailwindcss/forms')({ strategy: 'class' }),
],
}Menggayakan Kotak Pilihan
Dengan pemalam borang, kotak pilihan sudah dinormalkan. Anda kemudian boleh menyesuaikan saiz, warna dan pembulatannya dengan utiliti. Gunakan w-4 h-4 rounded text-blue-600 border-gray-300 — text-blue-600 pada kotak pilihan menetapkan warna isian tanda semak.
Gandingkan kotak pilihan dengan label menggunakan flex items-center gap-2 supaya kedua-duanya kekal sejajar secara mendatar. Teks label menggunakan text-sm font-medium text-gray-700.
<div class="flex items-center gap-2">
<input
id="terms"
type="checkbox"
class="w-4 h-4 rounded text-blue-600 border-gray-300
focus:ring-blue-500 focus:ring-2 cursor-pointer"
/>
<label for="terms" class="text-sm font-medium text-gray-700 cursor-pointer">
I agree to the <a href="/terms" class="text-blue-600 hover:underline">Terms of Service</a>
</label>
</div>Senarai Kotak Pilihan untuk Pemilihan Berbilang
Senarai kotak pilihan membolehkan pengguna memilih beberapa pilihan. Susun beberapa item kotak pilihan secara menegak dengan space-y-3 pada bekasnya. Kumpulkan item tersebut dalam <fieldset> dengan <legend> untuk kebolehcapaian.
Legend mengenal pasti keseluruhan kumpulan untuk pembaca skrin, manakala setiap label dikaitkan dengan kotak pilihan khususnya melalui atribut for/id.
<fieldset>
<legend class="text-sm font-semibold text-gray-900 mb-3">Notification preferences</legend>
<div class="space-y-3">
<div class="flex items-center gap-2">
<input id="email-notif" type="checkbox" checked class="w-4 h-4 rounded text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="email-notif" class="text-sm text-gray-700">Email notifications</label>
</div>
<div class="flex items-center gap-2">
<input id="push-notif" type="checkbox" class="w-4 h-4 rounded text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="push-notif" class="text-sm text-gray-700">Push notifications</label>
</div>
<div class="flex items-center gap-2">
<input id="sms-notif" type="checkbox" class="w-4 h-4 rounded text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="sms-notif" class="text-sm text-gray-700">SMS notifications</label>
</div>
</div>
</fieldset>Menggayakan Butang Radio
Butang radio digayakan sama seperti kotak pilihan, tetapi menggunakan rounded-full dan bukannya rounded untuk mengekalkan rupa bulat yang dikaitkan pengguna dengan pemilihan tunggal. Teknik text-blue-600 juga terpakai di sini untuk warna isian.
Semua butang radio dalam kumpulan yang sama mesti berkongsi atribut name yang sama supaya pelayar menguatkuasakan kekangan pemilihan tunggal.
<fieldset>
<legend class="text-sm font-semibold text-gray-900 mb-3">Plan</legend>
<div class="space-y-2">
<div class="flex items-center gap-2">
<input id="plan-starter" type="radio" name="plan" value="starter"
class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="plan-starter" class="text-sm text-gray-700">Starter — Free</label>
</div>
<div class="flex items-center gap-2">
<input id="plan-pro" type="radio" name="plan" value="pro" checked
class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="plan-pro" class="text-sm text-gray-700">Pro — $29/mo</label>
</div>
<div class="flex items-center gap-2">
<input id="plan-enterprise" type="radio" name="plan" value="enterprise"
class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="plan-enterprise" class="text-sm text-gray-700">Enterprise — Custom</label>
</div>
</div>
</fieldset>Kumpulan Radio Gaya Kad
Kumpulan radio gaya kad membungkus setiap pilihan dalam kad yang boleh diklik dan bukannya memaparkan butang radio kosong. Sembunyikan input radio secara visual tetapi kekalkan kebolehcapaiannya, kemudian gunakan utiliti peer untuk menggayakan kad berdasarkan keadaan ditanda bagi input tersebut.
peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600 pada kad label yang bersebelahan menghasilkan keadaan pilihan yang diserlahkan tanpa memerlukan JavaScript.
<div class="grid grid-cols-3 gap-3">
<label class="cursor-pointer">
<input type="radio" name="tier" value="starter" class="sr-only peer" />
<div class="border-2 border-gray-200 rounded-lg p-4 text-center
peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600
hover:border-gray-300 transition-colors">
<p class="font-semibold text-gray-900">Starter</p>
<p class="text-sm text-gray-500">Free</p>
</div>
</label>
<label class="cursor-pointer">
<input type="radio" name="tier" value="pro" class="sr-only peer" checked />
<div class="border-2 border-gray-200 rounded-lg p-4 text-center
peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600
hover:border-gray-300 transition-colors">
<p class="font-semibold text-gray-900">Pro</p>
<p class="text-sm text-gray-500">$29/mo</p>
</div>
</label>
</div>Komponen Suis Togol
Suis togol ialah kotak pilihan bergaya yang kelihatan seperti suis gelangsar hidup/mati. Binanya menggunakan <input type='checkbox'> dengan sr-only dan <div> bersebelahan yang menggunakan utiliti peer-checked untuk menganimasikannya.
Landasan menggunakan w-11 h-6 bg-gray-200 rounded-full, manakala tombol menggunakan w-4 h-4 bg-white rounded-full shadow yang diposisikan secara mutlak. Utiliti peer-checked:translate-x-5 menggelongsorkan tombol ke kanan apabila ditanda.
<label class="flex items-center gap-3 cursor-pointer">
<div class="relative">
<input type="checkbox" class="sr-only peer" />
<div class="w-11 h-6 bg-gray-200 rounded-full transition-colors duration-200
peer-checked:bg-blue-600"></div>
<div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow
transition-transform duration-200 peer-checked:translate-x-5"></div>
</div>
<span class="text-sm font-medium text-gray-700">Enable notifications</span>
</label>Pilihan Tersuai dengan Carian
<select> natif tidak menyokong carian. Untuk menu lungsur yang boleh dicari, gunakan gabungan tersuai input + senarai. Paparkan input teks untuk pengguna menaip, kemudian tapis <ul> yang kelihatan di bawahnya dengan JavaScript.
Gayakan senarai menu lungsur dengan absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto z-10 supaya kedudukannya betul di bawah input.
<div class="relative">
<input
type="text"
placeholder="Search country..."
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<ul class="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200
rounded-lg shadow-lg max-h-48 overflow-y-auto z-10">
<li class="px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 cursor-pointer">Germany</li>
<li class="px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 cursor-pointer">France</li>
<li class="px-3 py-2 text-sm text-blue-600 font-medium bg-blue-50 cursor-pointer">United Kingdom</li>
<li class="px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 cursor-pointer">United States</li>
</ul>
</div>Kotak Pilihan dan Pilihan Dilumpuhkan
Kotak pilihan dan pilihan yang dilumpuhkan menggunakan varian disabled:. Untuk kotak pilihan: disabled:opacity-50 disabled:cursor-not-allowed memudarkan elemen tersebut. Untuk pilihan: gabungkan ini dengan disabled:bg-gray-50 supaya sepadan dengan corak input teks yang dilumpuhkan.
Sentiasa tambahkan atribut HTML disabled — varian disabled: Tailwind hanya diaktifkan apabila atribut ini wujud pada elemen.
<!-- Disabled checkbox -->
<div class="flex items-center gap-2">
<input
type="checkbox"
disabled
class="w-4 h-4 rounded border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
/>
<label class="text-sm text-gray-400">Unavailable option</label>
</div>
<!-- Disabled select -->
<select
disabled
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed">
<option>Disabled option</option>
</select>Penggayaan Input Julat
Elemen <input type='range'> menghasilkan pelungsur. Dengan pemalam borang, anda boleh menggayakan landasan dan pemegang menggunakan accent-blue-600 — sifat CSS yang menetapkan warna kawalan natif seperti pelungsur julat, bar kemajuan dan kotak pilihan dengan satu utiliti.
accent-blue-600 ialah cara paling mudah untuk memberikan penjenamaan pada pelungsur natif tanpa menggantikannya sepenuhnya dengan komponen tersuai.
<div class="flex flex-col gap-1">
<label for="volume" class="text-sm font-medium text-gray-700">Volume: <span id="vol">50</span>%</label>
<input
id="volume"
type="range"
min="0"
max="100"
value="50"
oninput="document.getElementById('vol').textContent = this.value"
class="w-full h-2 accent-blue-600 cursor-pointer"
/>
</div>Semakan Pantas
Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini, anda mempelajari bahawa: pemalam @tailwindcss/forms menormalkan elemen borang natif merentas pelayar untuk menyediakan asas penggayaan yang kemas; kotak pilihan dan butang radio menggunakan text-blue-600 untuk menetapkan warna isian dan focus:ring-blue-500 untuk gelang fokus; serta utiliti peer membolehkan kumpulan radio gaya kad dan suis togol yang bertindak balas terhadap keadaan ditanda tanpa sebarang JavaScript. Seterusnya, kita akan mereka bentuk corak susun atur borang.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Menu Pilihan dan Kotak Tandaan” percuma?
Ya — teks penuh “Menu Pilihan dan Kotak Tandaan” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menu Pilihan dan Kotak Tandaan”?
Gayakan menu lungsur pilihan natif dan kotak tandaan, serta gunakan pemalam @tailwindcss/forms untuk menyeragamkan gaya borang merentas pelayar. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Menu Pilihan dan Kotak Tandaan” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menggayakan Medan Teks dan Kawasan Teks
- Menu Pilihan dan Kotak Tandaan
- Corak Tataletak Borang
- Pengesahan dan Keadaan Ralat