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

:required Pseudo-class

شبه کلاس required: در CSS هر عنصر <input>، <select> و یا <textarea> را هدف می گیرد که صفت required داشته باشد.

این شبه کلاس برای هایلایت کردن فیلدهایی از فرم که قبل از ثبت و ارسال باید مقدار معتبری داشته باشند، میتواند مفید باشد.

نکته: شبه کلاس optional: فیلدهای انتخابی فرم را انتخاب می کند.

در مثال زیر نحوه عملکرد این شبه کلاس را مبینیم:

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;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.