شبه کلاس optional: در CSS

: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 پشتیبانی می کنند.