optional یک انتخابگر از نوع pseudo-class است که می توان از طریق آن عناصر اختیاری یا غیر الزامی فرم را انتخاب کرد.
به بیان دیگر با این انتخابگر می توان عناصر فرمی که دارای ویژگی required نیستند را هدف قرار داد.
عناصری که می توانند توسط این انتخابگر به دام بیافتند شامل <input>, <textarea> و <select> می باشند. به عنوان مثال عناصر زیر می توانند طعمه این انتخابگر باشند:
<input type="name">
<input type="email">
<input type="checkbox">
<textarea name="" cols="50" rows="40"></textarea>
<select name="">
<!-- options -->
</select>
اما عناصر زیر قابل انتخاب توسط این انتخابگر نیستند چراکه ویژگی required را دارند:
<input type="name" required>
<input type="email" required>
<input type="checkbox" required>
<textarea name="" cols="50" rows="40" required></textarea>
<select name="" required>
<!-- options -->
</select>
زمانی که نیاز داریم تا عنصر فرمی که پر کردن آن اختیاری است را برای کاربر از نظر طراحی کم اهمیت تر از عنصری که باید پر شود جلوه بدهیم می توانیم از این انتخابگر استفاده کنیم.
در مثال زیر محلی که باید در آن آدرس سایت نوشته شود را به یک عنصر کم حال تبدیل می کنیم:
input[type="url"]:optional {
background-color: #f5f5f5;
border: 1px solid #eee;
}
مانند دیگر pseudo-classها می توان این انتخابگر را نیز با انتخابگرهای دیگر بصورت زنجیره ای استفاده کرد:
input:optional::before {
content: 'پر نکردی هم نکردی';
color: #777;
}
همچنین اگر می خواهید عناصر الزامی را انتخاب کنید می توانید از required استفاده کنید.
در دموی زیر عناصر الزامی و غیرالزامی به کمک انتخابگرهای :required و :optional استایل خاص گرفته اند:
See the Pen :required :optional by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگر ها
:optional در کروم +10, فایرفاکس, سافاری, اپرا +10, اینترنت اکسپلورر +10 و اندروید و iOS پشتیبانی می شود.
جزییات باگ ها و پشتیبانی مرورگرهای مختلف در مورد این انتخابگر را می توانید اینجا بررسی کنید:
سوال داری؟ برو به پنل پرسش و پاسخ