درCSS انتخابگرها ابزارهای قدرتمندی هستند که به ما کمک می‌کنند تا به عناصر مشخصی در صفحه اعمال سبک کنیم. یکی از این انتخابگرها :user-valid است که زمانی استفاده می‌شود که بخواهیم بر روی فرم‌ها کنترل داشته باشیم. این انتخابگر برای اعتبارسنجی ورودی کاربران بسیار مفید است. وقتی کاربر اطلاعاتی را وارد می‌کند که شرایط اعتبارسنجی موردنظر ما را برآورده کند، این انتخابگر به کار می‌آید.
این انتخابگر به خصوص در فرم‌های کاربری، نظیر ورود ایمیل، رمز عبور و غیره کاربرد دارد. تصور کنید فرمی داریم که در آن کاربر باید ایمیل خود را وارد کند. وقتی کاربر یک ایمیل معتبر وارد کند، می‌توانیم با استفاده از :user-valid به آن سبک خاصی اعمال کنیم، مثلاً رنگ پشت‌زمینه آن را تغییر دهیم تا نشان داده شود که ایمیل وارد شده معتبر است.
استفاده از انتخابگر :user-valid کمک می‌کند تا تجربه کاربری بهتری ایجاد شود، زیرا کاربران بلافاصله می‌توانند متوجه شوند که آیا اطلاعات وارد شده آنها صحیح و معتبر است یا خیر. در ادامه نمونه‌ای از کد مربوط به استفاده از :user-valid آورده شده است.
<style>
input:user-valid {
border-color: green;
background-color: #ccffcc;
}
</style>
<form>
<label for="email">ایمیل شما:</label>
<input type="email" id="email" name="email" required>
</form>
در این مثال، یک فیلد ایمیل داریم که تنها زمانی که کاربر ایمیل معتبر وارد کند، تغییرات استایل اعمال می‌شود. حالا بیایید یک توضیح خط به خط از کد داشته باشیم:
<style> این تگ آغاز استایل‌های CSS را مشخص می‌کند.
input:user-valid { این قسمت آغاز تعریف سبک برای هر ورودی‌ست که شرایط اعتبارسنجی آن صحیح باشد.
border-color: green; این خط رنگ حاشیه ورودی معتبر را سبز می‌کند.
background-color: #ccffcc; این خط رنگ پس‌زمینه ورودی معتبر را به سبز روشن تغییر می‌دهد.
</style> این تگ پایان تعریف استایل‌های CSS است.
<form> این خط آغاز فرم در HTML است.
<label for="email">ایمیل شما:</label> این خط برچسبی برای فیلد ایمیل ایجاد می‌کند.
<input type="email" id="email" name="email" required> این خط ورودی ایمیل را تعریف می‌کند که فیلد آن اجباری است.
</form> این تگ پایان فرم را نشان می‌دهد.