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

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

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

عنصر <select>

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

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

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 تعریف کنید.

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

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

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

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

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

ظاهر <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;
}

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

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

منابع

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