:optional Pseudo-class
شبه کلاس optional:
در CSS هر <input> ،<select>
و یا <textarea>
را هدف می گیرد که صفت required
برای آن در نظر گرفته نشده باشد.
نحوه نوشتار
input:optional { border: 1px dashed black; }
این شبه کلاس برای استایل دهی فیلدهایی مفید است که حالت انتخابی دارند.
برای دیدن عملکرد این شبه کلاس مثال زیر را میبینیم:
html
<form> <label for="name">نام:</label><br> <input type="text" id="name" required><br> <label for="last-name">نام خانوادگی:</label><br> <input type="text" id="last-name" required><br> <label for="tel">شماره تلفن:</label><br> <input type="text" id="tel" required><br> <label for="mobile">شماره موبایل:</label><br> <input type="text" id="mobile"><br> <label for="url">آدرس وبسایت:</label><br> <input type="text" id="url"><br> <button>ارسال</button> </form>
css
form { text-align:center; } input { margin :4px 0 8px; border-radius: 3px } input:optional { border: 2px solid dodgerblue; } input:required { border: 2px solid tomato; }
در این مثال تمام input
هایی که به آنها صفت required
داده شده است، به رنگ قرمز درامده اند.
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.