کنترل فرم یک ظاهر طراحی شده

در این ماژول می آموزید که چگونه به کنترل های فرم استایل دهید، و چگونه سبک های دیگر سایت خود را مطابقت دهید.

احتیاط: استایل دادن به کنترل‌های فرم HTML می‌تواند چالش برانگیز باشد، اما همچنان باید از عناصر داخلی تا جایی که ممکن است استفاده کنید. عناصری مانند <input> و <button> به طور گسترده در مرورگرها و پلتفرم‌ها پشتیبانی می‌شوند و دارای ویژگی‌های داخلی هستند که قابلیت استفاده و دسترسی را افزایش می‌دهند، که نیازی به پیاده‌سازی آن‌ها ندارید. در عوض استفاده از <div> این مزایا را ارائه نمی دهد.

به کاربران کمک کنید تا یک گزینه را انتخاب کنند

عنصر <select>

سبک های پیش فرض یک عنصر <select> عالی به نظر نمی رسند و ظاهر بین مرورگرها ناسازگار است.

توجه: همچنین می توانید از یک <input> در ترکیب با عنصر <datalist> استفاده کنید. این به شما ترکیبی از یک فیلد متنی و لیستی از عناصر <option> را می دهد. شما می توانید نمونه هایی از <datalist> را در اینجا مشاهده کنید.

ابتدا بیایید فلش ها را تغییر دهیم.

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

برای حذف فلش های پیش فرض عنصر <select> ، از ویژگی appearance CSS استفاده کنید. برای نشان دادن فلش مورد نظر خود، فلش را به عنوان background تعریف کنید.

توجه: برای اطمینان از بهترین سازگاری بین مرورگرها، باید نسخه های پیشوندی appearance را نیز اضافه کنید: -moz-appearance و -webkit-appearance . درباره پیشوندهای فروشنده بیشتر بیاموزید .

همچنین باید font-size برای عنصر <select> خود حداقل به 1rem تغییر دهید (که برای اکثر مرورگرها مقدار پیش‌فرض 16 پیکسل است). انجام این کار از بزرگنمایی صفحه در iOS Safari زمانی که کنترل فرم متمرکز است جلوگیری می کند.

البته می‌توانید رنگ‌های عناصر را نیز تغییر دهید تا با رنگ‌های برندتان مطابقت داشته باشند. پس از افزودن چند سبک دیگر برای فاصله، :hover و :focus ، ظاهر عنصر <select> اکنون بین مرورگرها سازگار است.

این را در نسخه ی نمایشی زیر از Styling a Select Like It's 2019 ببینید

در مورد عنصر <option> چطور؟ عنصر <option> یک عنصر به اصطلاح جایگزین شده است که نمایش آن خارج از محدوده CSS است. از زمان نوشتن این مقاله، نمی توانید به عنصر <option> استایل دهید.

توجه: یک پیشنهاد در حال انجام وجود دارد که به توسعه دهندگان وب اجازه می دهد تا به کنترل های رابط کاربری وب داخلی، از جمله عناصر <select> و <option> سبک و گسترش دهند. این امر استایل کردن به کنترل‌های فرم را در آینده آسان‌تر می‌کند. درباره Open UI بیشتر بدانید.

چک باکس ها و دکمه های رادیویی

ظاهر <input type="checkbox"> و <input type="radio"> در مرورگرها متفاوت است.

نسخه ی نمایشی را در مرورگرهای مختلف باز کنید تا تفاوت را ببینید. بیایید ببینیم چگونه می توان مطمئن شد که چک باکس ها و دکمه های رادیویی با برند شما مطابقت دارند و با مرورگر متقابل یکسان به نظر می رسند.

در گذشته، توسعه‌دهندگان نمی‌توانستند کنترل‌های <input type="checkbox"> و <input type="radio"> را مستقیماً استایل کنند. اکنون می‌توان چک‌باکس‌ها و دکمه‌های رادیویی را از طریق عناصر شبه‌شان مدل‌سازی کرد . یا از تکنیک جایگزینی زیر می توان برای ایجاد سبک های سفارشی برای این عناصر استفاده کرد.

ابتدا چک باکس پیش فرض و دکمه رادیویی را به صورت بصری مخفی کنید.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

مهم است که از position: absolute در ترکیب با opacity: 0 به جای display: none یا visibility: hidden استفاده کنید تا کنترل ها فقط از نظر بصری پنهان شوند. این اطمینان حاصل می کند که آنها همچنان توسط درخت دسترسی مرورگر در معرض دید قرار می گیرند. توجه داشته باشید که برای اطمینان از اینکه کنترل‌های فرم پنهان بصری در "بالای" عناصر جایگزین خود قرار دارند، ممکن است نیاز به استایل بیشتری باشد. انجام این کار کمک می‌کند تا اطمینان حاصل شود که وقتی صفحه‌خوان روشن است، یا هنگام استفاده از دستگاه‌های لمسی با صفحه‌خوان‌های فعال، ماوس را روی یکی از این عناصر قرار دهید، در صورت کاوش با لمس، کنترل‌های پنهان بصری قابل کشف خواهند بود و نشانگر فوکوس قابل مشاهده صفحه‌خوان نمایشگر معمولاً در مکانی که کنترل ها روی صفحه نمایش داده می شوند ظاهر می شوند.

برای نشان دادن چک باکس ها و دکمه های رادیویی سفارشی خود، گزینه های مختلفی دارید. شما از عنصر ::before CSS و ویژگی background CSS استفاده می کنید یا از تصاویر SVG درون خطی استفاده می کنید.

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

توجه: کنترل‌های فرم‌دار باید به راحتی قابل درک و استفاده باشند. مردم به چک باکسی که شبیه چک باکس است عادت دارند، بنابراین مطمئن شوید که وقتی یک فرم کنترل را استایل می‌دهید، کاربران هنوز نحوه استفاده از آن را می‌دانند.

امکانات زیادی با CSS وجود دارد تا اطمینان حاصل شود که چک باکس ها و دکمه های رادیویی با سبک برند شما مطابقت دارند.

درباره سبک‌های <input type="checkbox"> و <input type="radio"> و سبک‌های کادر تأیید سفارشی بیشتر بیاموزید.

چگونه از رنگ های سایت خود برای کنترل فرم ها استفاده کنید

آیا می خواهید سبک های سایت خود را با یک خط کد به شکل کنترل درآورید؟ برای رسیدن به این هدف می توانید از ویژگی accent-color CSS استفاده کنید.

checkbox {
  accent-color: orange;
}

توجه: از زمان نوشتن این مقاله، فقط Chrome، Firefox و Edge از accent-color پشتیبانی می‌کنند. برای اطمینان از سازگاری بین مرورگرها، ممکن است بخواهید از راه‌حل‌هایی استفاده کنید تا زمانی که accent-color در همه پلتفرم‌ها پشتیبانی شود.

درک خود را بررسی کنید

دانش خود را در مورد کنترل فرم یک ظاهر طراحی کنید

چگونه می توانید استایل بومی پلتفرم کنترل های فرم را حذف کنید؟

استفاده از revert: all; .

دوباره امتحان کنید!

استفاده از appearance: none; .

🎉

استفاده از appearance: revert; .

دوباره امتحان کنید!

استفاده از revert: appearance; .

دوباره امتحان کنید!

منابع

• رنگ تاکیدی
• استایل دادن به عنصر <select>
• دسترسی به کنترل‌های فرم استایل شده
• UI را باز کنید