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

:valid Pseudo-class

سودو کلاس valid: در CSS، عنصر <input> و دیگر عناصر <form> را که مقادیر آنها معتبر شده است را هدف می گیرد. این به شما امکان می دهد که فیلدهای معتبر را از نظر ظاهری تغییر دهید و این امر باعث می شود که کاربر متوجه ورود صحیح داده شود.

/* معتبری انتخاب می شود <input> هر */
input:valid {
  background-color: powderblue;
}

در مثال زیر میبینیم که <input> اول (“Email”) سبز یا به عبارتی معتبر است حتی زمانیکه مقداری داخل این فیلد نباشد. این بدین خاطر است که این فیلد انتخابی است و خالی گذاشتنش هم باعث معتبر بودنش برای ثبت و ارسال فرم می شود. برای تصحیح این حالت در فیلد دوم از صفت (attribute) "required" استفاده کرده ایم که به معنی اینست که خالی گذاشتنش موجب نامعتبر بودن ثبت اطلاعات خواهد شد.

html

<label for="email">ایمیل:</label>
<input type="email" id="email" name="email" />

<label for="emailRequired">ایمیل (ضروری):</label>
<input type="email" id="emailRequired" name="emailRequired" required />

<form action="#">
  <label id="guess">یک عدد مابین 1 تا 9:</label>
  <input type="text" id="guess" name="guess" pattern="[1-9]{1}" required />
</form>

css

body { direction: rtl; text-align: center}
input:invalid {
  background: hsla(0, 90%, 70%, 1);
}

input:valid {
  background: hsla(100, 90%, 70%, 1);
}


body {
  padding: 3em;
}
label {
  display: block;
}
input {
  padding: 0.25em 0;
  margin-bottom: 0.75em;
}

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

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