مرجع CSS فارسی

PSEUDO-CLASS

in-range:

شبه کلاسی است که برای انتخاب و استابل دهی به المان هایی استفاده می شود که دارای محدوده ایی برای تعامل با کاربر هستند.

در واقع، زمانی که مقداری که یک المان می تواند به عنوان محدوده قبول کند . به عنوان ورودی وارد شود این شبه کلاس ، المان مورد نظر را انتخاب می کند.

نمونه ایی از المان هایی که دارای محدوده ی ورودی هستند در تکه کد زیر آمده است .

<input type="number">
                

input های از نوع number می توانند دو مقدار min و max را به عنوان محدوده دریافت کنند.

<input type="number" min="1" max="10" value="8">
                

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

<input type="number" min="1" max="10" value="8">
                

المانی که خارج از محدوده باشد را نیز می توان با استفاده از شبه کلاس out-of-range: انتخاب و استایل دهی کرد.

سایر نکات

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

input:in-range:hover {
    cursor: help;
}
                
دمو (کد های زیر را تغییر داده و نتیجه را مشاده کنید)

از in-range:  و out-of-range: برای استایل دهی به المان زیر استفاده شده . عددی را خارج از محدوده ی 1 تا 10 و داخل این محدوده وارد کنید.

See the Pen :in-range CSS example by alishooti (@alishooti) on CodePen.0

پشتیبانی مرورگر

کروم +10 ، سافاری  و اپرا +11 ، فایر فاکس +28 و در اندروید و آی او اس پشتیبانی می شود.

اینترنت اکسپلورر از in-range: پشتیبانی نمی کند.

بیشتر بخوانید

استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .

همچنین منتظر دیدگاه های شما هستیم.