آشنایی با انتخابگر :out-of-range در CSS

انتخابگرهای CSS ابزارهایی قوی هستند که به ما امکان می‌دهند تا به صورت دقیق اجزاء HTML را هدف‌گذاری کنیم و استایل بهینه‌تری برای آنها اعمال کنیم. انتخابگر :out-of-range یکی از انتخابگرهایی است که بیشتر در فرم‌های HTML مورد استفاده قرار می‌گیرد. این انتخابگر به ما اجازه می‌دهد که در تنظیمات فرم‌ها، به کاربر بازخورد بصری در مورد ورودی‌هایی که خارج از محدوده مد نظر ما هستند ارائه دهیم.

فرض کنید در یک فرم، کاربر باید یک عدد بین ۱ تا ۱۰ وارد کند. اگر کاربر عددی خارج از این بازه وارد کند، ما می‌توانیم با استفاده از :out-of-range این ورودی‌ها را به صورت بصری نشانه‌گذاری کنیم و مثلاً با تغییر رنگ آن ورودی، کاربر را متوجه اشتباه خود کنیم.

این یک روش ساده اما بسیار موثر است که به تجربه کاربری بهتر و کنترل بیشتر بر روی ورودی‌های کاربر منتهی می‌شود. انتخابگر :out-of-range به طور خاص بر روی ورودی‌هایی با ویژگی type مانند number و range کاربرد دارد.

با استفاده از این انتخابگر، ما قادر خواهیم بود تا استایل‌های خاصی را در مواقعی که ورودی کاربر از حداقل و حداکثر تعیین شده تجاوز می‌کند، اعمال کنیم. حتی می‌توانیم از آن برای ایجاد افکت‌های جالب و کاربردی در فرم‌ها استفاده کنیم که تجربه کاربری بهینه‌تری را ارائه دهد.

در ادامه کد نمونه‌ای ارائه می‌شود که نحوه‌ی استفاده از انتخابگر :out-of-range را نمایش می‌دهد.

<form>
  <label for="age">سن خود را وارد کنید: </label>
  <input type="number" id="age" name="age" min="1" max="10">
</form>

<style>
  input:out-of-range {
    border-color: red;
    background-color: #ffdada;
  }
</style>

توضیح خط به خط کد

<form> | این تگ HTML یک فرم را ایجاد می‌کند که حاوی ورودی‌ها و دکمه‌های ارسال است.
<label for="age"> | با این تگ یک برچسب برای ورودی ایجاد می‌کنیم و آن را به ورودی خاصی اختصاص می‌دهیم که id آن age باشد.
<input type="number"> | این ورودی به کاربر امکان وارد کردن عدد را می‌دهد و از نوع number است.
min="1" max="10" | اینها ویژگی‌هایی هستند که حداقل و حداکثر مقدار مجاز را برای ورودی تعیین می‌کنند.
input:out-of-range | این انتخابگر CSS بر روی ورودی‌هایی اعمال می‌شود که مقادیر آنها خارج از محدوده تعیین شده‌ی min و max باشد.
border-color: red; | هنگامی که ورودی خارج از محدوده است، رنگ حاشیه‌ی آن قرمز می‌شود.
background-color: #ffdada; | زمینه‌ی ورودی خارج از محدوده به این رنگ تغییر می‌یابد تا برجسته‌تر شود.