Select
1️⃣ Basic Select (لیست کشویی ساده)
-
کلاس اصلی:
form-select
-
selected→ گزینه پیشفرض -
aria-label→ برای دسترسی و خوانایی توسط screen reader
2️⃣ Small / Large Select (اندازهها)
-
کوچک:
form-select-sm -
بزرگ:
form-select-lg
3️⃣ Disabled / Readonly Select
-
غیر فعال:
disabled
-
توجه: در Select readonly معمولاً استفاده نمیشود، چون غیر فعال کردن کافی است.
4️⃣ Multiple Select (انتخاب چندگانه)
-
کلاس:
form-select+ صفتmultiple -
انتخاب همزمان چند گزینه توسط Ctrl/Cmd یا Shift
5️⃣ Custom Styling / Colors
-
میتوان با Utilities کلاسهای رنگ و فاصله ترکیب کرد
6️⃣ Form Integration
-
Select میتواند با Grid و Input Group ترکیب شود
-
استفاده از
input-group-textبرای اضافه کردن متن یا آیکون کنار Select
✅ نکات مهم
-
کلاس
form-selectبرای زیبایی و ریسپانسیو بودن Select استفاده میشود. -
اندازهها (
sm,lg) و رنگها با Utilities قابل ترکیب هستند. -
برای فرمهای حرفهای میتوان Select را با Grid، Input Group و Floating Label ترکیب کرد.
HTML
Tailwind Css
Bootstrap 5
Java script
++C
Python
Three.js
Gsap
Sass
SQL
React