این آموزش در تاریخ ۱۴۰۰/۱۰/۱۳ آپدیت شده است.
آموزش شبه عنصر placeholder در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه عنصر placeholder در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه عنصر placeholder در CSS
با استفاده از شبه عنصر ( یا هم انتخابگر ) placeholder در CSS میتوان برای عناصر ورودی که دارای [ متن زمینه ] یا [ Placeholder ] می باشند استایل دلخواه مشخص کرد.
حتما تا الان در تکست باکس های موجود در فرم ها دیده اید که یک متن بصورت کمرنگ در داخل تکست باکس ها وجود دارد و مثلا میگه در این باکس فلان مقدار رو وارد کن، به همین میگن Placeholder
Free-Learn
مثال از شبه عنصر placeholder در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه عنصر را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : انتخاب Input هایی که نوعشون text هست ، بعدش دادن استایل به PlaceHolder
|
1 2 3 4 5 6 7 8 9 10 |
<style> input[type=text]::placeholder { background-color: orange; color:#000; font-size: 11px; font-style: italic; } </style> |
مثال شماره ۲ : اگه توجه کنید در مثال شماره ۱ ، PlaceHolder کمرنگ هست، میتونیم با استفاده از ویژگی Opacity میزان شفافیتشو بیشتر کنیم
|
1 2 3 |
input[type=text]::placeholder { opacity:1; } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه عنصر placeholder در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| placeholder:: | ۵۷ | ۵۱ | ۴۴ | ۱۰٫۱ | ۷۹ |
Free-Learn
شکل نوشتاری شبه عنصر placeholder در CSS
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه عنصر در CSS بصورت زیر می باشد.
|
1 2 3 |
::placeholder { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
این شبه عنصر در جدیدترین نسخه های مرورگرهای اینترنتی ( مثه فایرفاکس و گوگل کروم و.. ) بدون هیچ مشکلی پشتیبانی میشه ولی خب در نسخه های قدیمی تر این ویژگی پشتیبانی نمیشه و باید از یسری دستورات پیشوندی استفاده کرد.
- از نسخه ۱۲ تا ۱۸ مرورگر Edge
|
1 2 3 |
::-ms-input-placeholder{ .... } |
- از نسخه ۱۹ تا ۵۰ مرورگر فایرفاکس
|
1 2 3 |
::-moz-placeholder{ .... } |
- از نسخه ۴ تا ۵۶ مرورگر کروم
|
1 2 3 |
::-webkit-input-placeholder{ .... } |
- از نسخه ۵ تا ۱۰ مرورگر سافاری ( Safari )
|
1 2 3 |
::-webkit-input-placeholder{ .... } |
- از نسخه ۱۵ تا ۴۳ مرورگر Opera
|
1 2 3 |
::-webkit-input-placeholder{ .... } |
