در سیستم کار کنید

css جای جای طراحی کنید. نمای خارجی نام فیلد یا نحوه تغییر مکان نگهدار. نحوه تغییر رنگ متن اشاره در مکان نگهدار در ورودی

مشخصه مکان نگهدار تنظیم شده است که در وسط عناصر ورودی خالی و ناحیه متنی فراخوانی شود. در این مقاله به امکانات سبک سازی متن یک مکان نگهدار و همچنین ترفندهایی برای کاربرپسندتر و کاربردی تر کردن آن می پردازیم.

خوب، برای کسانی که نمی‌دانند نگهدارنده مکان چیست، بیایید با لب به لب شروع کنیم.

html

سبک نگهدارنده مکان را می توان با استفاده از مجموعه قوانین CSS زیر تغییر داد:

css

::- webkit-input-placeholder (رنگ: #c0392b;) :: - moz-placeholder (رنگ: #c0392b;) / * Firefox 19+ * /: -moz-placeholder (رنگ: # c0392b;) / * Firefox 18- * /: -ms-input-placeholder (رنگ: #c0392b؛)

ترسناک به نظر می رسد، اینطور نیست؟ در سمت راست چیزی است که در استانداردها گم شده است. مرورگر پوست سبک‌سازی مکان‌نما را به روش خود پیاده‌سازی می‌کند.

در فایرفاکس اینترنت اکسپلورر و قدیمی تر (قبل از 18)، placeholder یک کلاس شبه است و در فایرفاکس جدید، webkit و blink - شبه عناصر است.

من از آنچه اتفاق افتاد تعجب می کنم:

باید گفت که همه مقامات css ممکن پشتیبانی نمی شوند. اکثر مرورگرهای فعلی به شما اجازه می دهند که تغییر دهید:

  • فونت (و مراجع مرتبط)
  • پیشینه (و مراجع مرتبط)
  • رنگ
  • فاصله کلمات
  • فاصله بین حروف
  • متن-تزیین
  • تراز عمودی
  • تبدیل متن
  • ارتفاع خط
  • تورفتگی متن
  • سرریز متن
  • کدورت

اگر مکان‌دار مناسب نباشد چه؟

برخی از فیلدها برای وارد کردن متن به دلیل ویژگی های طرح، به ویژه در دستگاه های تلفن همراه، از نظر عرض تنظیم می شوند. در نتیجه، مکان نگهدار متن طولانی به طرز نامناسبی بریده می شود. برای جلوگیری از این، می توانید از text-overflow: ellipsis استفاده کنید. این نحو در تمام مرورگرهای جدید استفاده خواهد شد.

css

ورودی (متن سرریز: بیضی؛) ورودی :: - moz-placeholder (متن-سرریز: بیضی؛) ورودی: -moz-placeholder (متن-سرریز: بیضی؛) ورودی: -ms-input-placeholder (متن سرریز : بیضی؛)

چگونه در حین فوکوس یک مکان نگهدار وصل کنیم؟

محل قرارگیری مکان نگهدار به طرق مختلف متفاوت است.

  1. در برخی از مرورگرها، وقتی فوکوس خاموش است، ورودی را وارد کنید
  2. در مرورگرهای دیگر، اگر واضح باشد، می خواهید یک کاراکتر وارد کنید

من گزینه اول را ترجیح می دهم. برای تنظیم این رفتار در همه مرورگرهایی که از متغیرهایی پشتیبانی می کنند، قوانین CSS زیر مهم هستند:

css

: فوکوس :: - webkit-input-placeholder (رنگ: شفاف): فوکوس :: - moz-placeholder (رنگ: transparent): تمرکز: -moz-placeholder (رنگ: transparent): تمرکز: -ms-input-placeholder ( رنگ: شفاف)

جایگیر زیباست

همچنین می‌توانید یک انتقال برای ظاهر و قرارگیری placeholder-a اضافه کنید:

css

/ * به آرامی دید مکان‌نما را با فوکوس تغییر دهید * / .input1 :: - webkit-input-placeholder (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛) .input1 :: - moz-placeholder (تاری: 1؛ انتقال : opacity 0.3s ease;).input1: -moz-placeholder (opacity: 1; transition: opacity 0.3s ease;).input1: -ms-input-placeholder (opacity: 1; transition: opacity 0.3s ease;). ورودی 1 : فوکوس :: - webkit-input-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛). ورودی1: فوکوس:: - moz-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛). ورودی1: فوکوس: -moz-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛) .input1: تمرکز: -ms-input-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛) / * از بین بردن مکان نگهدار به درست هنگام فوکوس * / .input2 :: - webkit-input-placeholder (input-input-placeholder (text-input-placeholder; transition: text-indent 0.3s ease;).input2 :: - moz-placeholder (text-input: 0px; transition: text -indent 0.3s ease;) .input2: -moz-placeholder (text-indent: 0px; transition: text-indent 0.3s ease;).input2: -ms-input-placeholde r (text-indent: 0px; transition: text-indent 0.3s ease;) .input2: focus :: - webkit-input-placeholder (input-text: 500px; transition: text-indent 0.3s ease;).input2: focus :: - moz-placeholder ( text-indent: 500px؛ انتقال: text-indent 0.3s ease;).input2: فوکوس: -moz-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;).input2: فوکوس: -ms- input-placeholder (text-input: 500px; transition: text-indent 0.3s ease;) / * جابجایی را در فوکوس جمع کنید * / .input3 :: - webkit-input-placeholder (خط-ارتفاع: 20px؛ انتقال: خط -height 0.5s ease;).input3:: - moz-placeholder (line-height: 20px; transition: line-height 0.5s ease;).input3: -moz-placeholder (line-height: 20px; transition: line-height: 20px; transition: line-height 0.5s ease;). ارتفاع 0.5 ثانیه ease؛).input3: -ms-input-placeholder (خط-ارتفاع: 20 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛).input3: فوکوس:: - webkit-input-placeholder (ارتفاع خط: 100px ؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛) .input3: فوکوس:: - moz-placeholder (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛).input3: فوکوس: -moz-placehold er (خط - ارتفاع: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛) .input3: فوکوس: -ms-input-placeholder (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛)

امیدوارم در دستان خوبی باشید. احترام و پیشنهادات را در نظرات بنویسید.

Placeholder عنصری از فیلد ورودی است که می توان یک اشاره در آن قرار داد. هنگامی که مشتری شروع به وارد کردن داده می کند، متن اضافی ناپدید می شود تا نادیده گرفته نشود. هر مرورگری ذهن خود را در مورد نحوه نمایش این عنصر دارد و گاهی اوقات سبک های پیش فرض کل طراحی را خراب می کنند. برای رسیدگی به آنها، باید از یک قانون نگهدارنده مکان CSS ویژه استفاده کنید.

جانشین کجاست؟

مشکل این است که راهنمای ابزار فیلد ورودی به طور ایمن در سایه DOM ذخیره می شود و رسیدن به آن چندان آسان نیست. که برای آن یک متغیر غیر استاندارد :: وجود دارد. با این کمک می توانید قدرت های اعلان را مدیریت کنید.

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

ورودی:: مکان‌نما (رنگ: قرمز؛ کدورت: 1؛ سبک قلم: مورب؛)

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

شبه عنصر متغیر CSS توسط همه مرورگرهای مدرن به خوبی پردازش می شود و برای تشویق مرورگرهای قدیمی تر، می توانید به سرعت از پیشوندها استفاده کنید:

  • :: - webkit-input-placeholder - برای مرورگرهای وب کیت (Safari، Chrome، Opera).
  • :: - moz-placeholder - برای مرورگرهای فایرفاکس بالاتر از نسخه 19.
  • : -Moz-placeholder - برای فایرفاکس قدیمی.
  • : -Ms-input-placeholder - برای اینترنت اکسپلورر بالاتر از نسخه 10.

ظاهراً مرورگرهای قدیمی‌تر موزیلا و همچنین IE به کلاس شبه CSS و نه شبه عناصر احترام می‌گذارند. ما با آنها بحث نخواهیم کرد، فقط هنگام استایل دادن به فیلد ورودی به این جنبه توجه می کنیم.

امکان سبک سازی

برای عنصر شبه مکان‌دار در CSS، می‌توانید پارامترهای زیر را تنظیم کنید:

  • پس زمینه - گروه بلوک اشاره به کل فیلد ورودی گسترش می یابد. شما می توانید نه تنها رنگ (رنگ پس زمینه)، بلکه تصویر (پس زمینه-تصویر) را نیز مشخص کنید.
  • رنگ متن - رنگ؛
  • بینش - کدورت;
  • زیر صندلی، روی صندلی یا روی صندلی - متن تزئینی؛
  • ثبت - تبدیل متن.
  • ورودی های داخلی - بالشتک. همه مرورگرها پشتیبانی نمی شوند. برای عناصر کوچک، ورودی های بالا و پایین نادیده گرفته می شوند.
  • نمایش فونت - قدرت گروه فونت، ارتفاع خط و ورودی های مختلف (متن-تورفتگی، فاصله حروف، فاصله بین کلمات).
  • تراز عمودی در یک ردیف - عمودی-تراز کردن؛
  • برش متن هنگام پر کردن مجدد ظرف - سرریز متن.
.input1 :: مکان‌نما (تصویر پس‌زمینه: گرادیان خطی (آهک، آبی؛ رنگ: سفید؛) ورودی 3 :: مکان نگهدار (اندازه قلم: 16 پیکسل؛ فاصله حروف: 10 پیکسل؛). input4 :: مکان نگهدار (پس زمینه: قهوه ای؛ رنگ: سفید؛ متن سرریز: بیضی؛)

خارج از توجه

پس از تکمیل، اعلان از فیلد ورودی ناپدید می شود فقط در صورتی که بخواهید یک کاراکتر در ورودی جدید داشته باشید. مکان نگهدار به شما این امکان را می دهد که هنگام تمرکز بر روی میدان، همان جلوه را اعمال کنید. برای این منظور لازم است آن را با شبه کلاس: تمرکز ترکیب کنید.

ورودی: فوکوس:: جایگیر (رنگ: شفاف؛)

در برخی از مرورگرها، می توان با استفاده از یک دستورالعمل انتقال اضافی، از تغییر تعدادی از کنترل های مکان نگهدار اجتناب کرد.

ورودی:: مکان‌نما (رنگ: سیاه؛ انتقال: رنگ 1s؛) ورودی: فوکوس:: مکان‌نما (رنگ: سفید؛)

در مرورگر گوگل کروم، اشاره رنگ هنگام فوکوس روی چنین زمینه ای به آرامی در طول یک ثانیه تغییر می کند.

Placeholder یک شبه کلاس یا شبه عنصر است که نمایش نام یک فیلد را نشان می دهد. برای برچسب اسباب‌بازی suttu tse (بیایید برای سادگی آن را به این شکل بنامیم) که در آن کلمه را وارد می‌کنید و koristuvach bach yogo را در وسط آن وارد می‌کنید. این شبیه به نکات یا نام هایی برای زمینه شکل پوست است.

هر مرورگر این برچسب را پس از تگ خود جمع آوری می کند و سبک های طراحی آن از زیبایی محروم می شود. برای تغییر استایل های پشت صحنه، فقط باید چند خط کد به فایل استایل ها اضافه کنید. هیچ چیز تاشو وجود ندارد.
درست است، باید باور داشت که همه چیز را نمی توان به خاطر آورد.

در میان این طیف گسترده از سبک ها، در این دوره سخنرانی های زیر در دسترس ما است:

  • font-weight - تنظیم وزن متن
  • اندازه قلم - اندازه متن را انتخاب کنید
  • font-family - فونت را انتخاب کنید
  • پس زمینه - پس زمینه و تصاویر پس زمینه
  • رنگ - رنگ متن
  • فاصله بین کلمات - تنظیم فاصله بین کلمات
  • فاصله حروف - تنظیم فاصله بین حروف
  • text-decoration - دکوراسیون متن را انتخاب کنید. صندلی راحتی، صندلی و غیره
  • vertical-align - تنظیم تراز عمودی
  • تبدیل متن - تغییر متن را انتخاب کنید. همه نویسندگان بزرگ و کوچک و غیره.
  • ارتفاع خط - فاصله بین ردیف ها
  • text-indent - یک تورفتگی سمت چپ در ردیف اول پاراگراف درج می کند
  • متن سرریز - نمایش متنی را انتخاب کنید که در بلوک مناسب نیست (افزودن یا برش و اضافه کردن سه نقطه)
  • opacity - قابلیت مشاهده عنصر را انتخاب کنید

اکنون که با سبک های موجود آشنا شدیم می توانیم به طراحی اقدام کنیم که سبک های زیر برای آن موجود است:

:: - webkit-input-placeholder (رنگ: #2cb04d؛)
::- moz-placeholder (رنگ: #2cb04d؛) / * Firefox 19+ * /
: -Moz-placeholder (رنگ: #2cb04d;) / * Firefox 18- * /
: -Ms-input-placeholder (رنگ: #2cb04d؛)

پس از افزودن این ردیف ها، رنگ نام ها در وسط فیلدهای فرم و در مرورگر شما ثابت می ماند. در اینجا می توانید سبک های اضافی اضافه کنید.
مثلا اکسل این سبک است

:: - webkit-input-placeholder (رنگ: #2cb04d؛ اندازه قلم: 1.5em؛ وزن قلم: 600؛)
::- moz-placeholder (رنگ: #2cb04d؛ اندازه قلم: 1.5em؛ وزن قلم: 600؛) / * Firefox 19 + * /
: -Moz-placeholder (رنگ: #2cb04d؛ اندازه قلم: 1.5em؛ وزن قلم: 600؛) / * Firefox 18 - * /
: -Ms-input-placeholder (رنگ: #2cb04d؛ اندازه قلم: 1.5em؛ وزن قلم: 600؛)

رنگ، اندازه بزرگ و وزن متوسط ​​را به متن اضافه کنید. نحوه اضافه کردن قدرت اضافی -
text-overflow: بیضی، سپس متن بیش از اندازه فیلد کوتاه می شود و سه نقطه در پایان اضافه می شود.

یک چیز مهم دیگر این است که هنگامی که انیمیشن ها در CSS (سبک) ظاهر می شوند، می توانید هنگام قرار دادن مکان نما در فیلد، نحوه اعمال آنها را سفارشی کنید. قبلاً با استفاده از js (اسکریپت) کار می کرد

ورودی:: - webkit-input-placeholder (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
.input :: - moz-placeholder (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
ورودی: -moz-placeholder (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
ورودی: -ms-input-placeholder (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
ورودی: فوکوس :: - webkit-input-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
ورودی: فوکوس: - moz-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
ورودی: فوکوس: -moz-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
.input: فوکوس: -ms-input-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛)

افزودن چنین سبک‌هایی به مکان‌نما اجازه می‌دهد تا هنگام قرار دادن مکان‌نما در فیلد، به آرامی کار کند
.input کلاس عنصر فرم است. برای اینکه استایل ها تعریف شوند، کد فیلد فرم باید به شکل زیر باشد:

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


ورودی فرم .contacts-form:: - webkit-input-placeholder (رنگ: #2cb04d؛ اندازه قلم: 1.5em؛ وزن قلم: 600؛)
ورودی فرم .contacts-form::- moz-placeholder (رنگ: #2cb04d؛ اندازه قلم: 1.5em؛ وزن قلم: 600؛) / * Firefox 19 + * /
ورودی فرم .contacts-form: -moz-placeholder (رنگ: #2cb04d؛ اندازه قلم: 1.5em؛ وزن قلم: 600؛) / * Firefox 18 - * /
ورودی فرم .contacts-form: -ms-input-placeholder (رنگ: #2cb04d؛ اندازه قلم: 1.5em؛ وزن قلم: 600؛)

محور را می توان به روش های ساده ای ایجاد کرد تا به طور موثر طراحی فرم را تکمیل کند.

ویژگی placeholder را در ورودی و ناحیه متنی تنظیم کنید تا روی وسط این عناصر کلیک کنید. در این یادداشت تعدادی از گزینه‌ها را برای سبک‌سازی متن متغیرها و همچنین گزینه‌هایی برای انیمیشن آن‌ها شرح خواهم داد.

همچنین، رنگ متن مکان‌دار ما را می‌توان با استفاده از مجموعه قوانین CSS زیر تغییر داد:

::- webkit-input-placeholder (رنگ: #c0392b;) :: - moz-placeholder (رنگ: #c0392b;) / * Firefox 19+ * /: -moz-placeholder (رنگ: # c0392b;) / * Firefox 18- * /: -ms-input-placeholder (رنگ: #c0392b؛)

مقدار کد برای سبک سازی چنین قدرت ساده ای به دلیل عدم وجود یک استاندارد قانونی است که به همین دلیل مرورگر به روش خود سبک سازی مکان نگهدار را پیاده سازی می کند.

علاوه بر این، همه مقامات CSS پشتیبانی نمی شوند. محور پرلیک دقیقاً توسط مقامات حمایت می شود:

فونت (و بافتنی)
پس زمینه (و بافتنی)
رنگ
فاصله کلمات
فاصله بین حروف
متن-تزیین
تراز عمودی
تبدیل متن
ارتفاع خط
تورفتگی متن
سرریز متن
کدورت

همچنین اتفاق می‌افتد که متن مکان‌نما فراتر از عرض عنصر ورودی یا ناحیه متنی (بخشی از طرح‌بندی برای دستگاه‌های تلفن همراه) گسترش می‌یابد. با این کار، موها به طور خودکار به صورت نامناسب کوتاه می شوند.

CSS-power به ما کمک می کند تا این ناهماهنگی را اصلاح کنیم، مانند سرریز متن: بیضی، که یک بیضی زیبایی شناختی را به مکان برش داده شده اضافه می کند. در استایل ها، محور به صورت زیر نوشته می شود:

ورودی [placeholder] (text-overflow: elipsis;) input :: - moz-placeholder (text-overflow: elipsis;) ورودی: -moz-placeholder (text-overflow: elipsis;) ورودی: -ms-input-placeholder ( سرریز متن: بیضی؛)

برای افزودن زیبایی‌شناسی بیشتر به مکان‌نماهایمان، می‌توان وقتی تمرکز عنصر اصلی برداشته شد، جلوه جذابیت را اضافه کرد.

تعدادی از این نوع با عناصر انیمیشن:

/ * به آرامی دید مکان‌نما را در حین فوکوس تغییر دهید * /.input :: - webkit-input-placeholder (opacity: 1; transition: opacity 0.3s ease;) .input :: - moz-placeholder (opacity: 1; transition: opacity 0.3s ease;). ورودی: -moz- مکان نگه دارنده (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛). ورودی: -ms-input-placeholder (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛). ورودی (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت; ) .input: focus :: - moz-placeholder (opacity: 0; transition: opacity 0.3s ease;) .input: focus: -moz-placeholder (opacity: 0; transition: opacity 0.3s ease;) ورودی: فوکوس : -ms-input-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛) / * حین فوکوس، مکان نگهدار سمت راست را از بین ببرید * /.input :: - webkit-input-placeholder (input-input-placeholder (text-indent: 0px; transition: text-indent 0.3s ease;) .input :: - moz-placeholder (text-input: 0px; transition: text-indent 0.3s easy ;).ورودی: -moz-placeholder (Text-indent: 0px; Transition: text-indent 0.3s ease;). ورودی: -ms-input-placeholder (text-indent: 0px; Transition: text-indent 0.3s ease ؛). ورودی : تمرکز :: - webkit-input-placeholder(Text-indent: 500px؛ transition: text-indent 0.3s ease;). ورودی: فوکوس:: - moz-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;). ورودی: فوکوس: - moz-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;).ورودی: فوکوس: -ms-input-placeholder (text-input-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;) / * نگهدارنده مکان را در فوکوس خرد کنید * /.input :: - webkit-input-placeholder (ارتفاع خط: 20 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛) ورودی :: - moz-placeholder (ارتفاع خط: 20 پیکسل؛ انتقال: ارتفاع خط: سهولت 0.5 ثانیه ;).ورودی: -moz-placeholder (ارتفاع خط: 20 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛). ورودی: -ms-input-placeholder (ارتفاع خط: 20 پیکسل؛ انتقال: ارتفاع خط: سهولت 0.5 ثانیه ؛). ورودی : تمرکز :: - webkit-input-placeholder(ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛). ورودی: فوکوس :: - مکان نگهدارنده moz (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط: سهولت 0.5 ثانیه؛). ورودی: فوکوس: - moz-placeholder (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛). ورودی: فوکوس: -ms-input-placeholder (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط: سهولت 0.5 ثانیه؛)

به کجا خواهیم رسید؟

مکان‌ها، آن عناصر متنی که اغلب در داخل ورودی خاکستری می‌شوند، می‌توانند برای استایل کردن دردسر ساز باشند. خوشبختانه ما یک راه حل کوتاه اما موثر CSS برای استایل دادن به متن متغیر ورودی شما به هر رنگ و تیرگی که می خواهید تهیه کرده ایم. کد را بخوانید.

تغییر رنگ متن مکان‌نما

اجازه دهید با یک ورودی ساده و مقداری متن مکان‌نما شروع کنیم، برای این مثال از کلمه «جستجو» استفاده می‌کنیم، اما شما می‌توانید از هر چیزی که می‌خواهید استفاده کنید. HTML اصلی در زیر آمده است:

HTML

متن متغیر ورودی (و textarea) به طور پیش‌فرض روی رنگ خاکستری روشن است، با این حال، می‌توانیم آن را با چند خط CSS تغییر دهیم. در اینجا ما متن ورودی را با استفاده از نام رنگ HTML قرمز رنگ می کنیم، اما هر روش رنگی کافی است (HEX، RGB، HSL).

CSS
::- webkit-input-placeholder (/*Chrome*/color:red;):-ms-input-placeholder (/*IE 10+ */color:red;) ::-moz-placeholder (/*Firefox 19 +*/color:red; opacity:1;):-moz-placeholder (/*Firefox 4 - 18 */color:red;opacity:1;)

توجه داشته باشید که "مهم است که پیشوندهای مختلف فروشنده را برای پشتیبانی از هرچه بیشتر مرورگرها درج کنید. فقط متن متغیر ورودی فایرفاکس به صورت پیش فرض کمی شفاف است، بنابراین تنظیم خاصیت opacity در IE یا Chrome غیر ضروری است.

تغییر رنگ متن فوکوس مکان‌نما

بسیار خوب، ما با موفقیت رنگ متن مکان‌نما را به قرمز تغییر دادیم، اما اگر زمانی که کاربر در ورودی ما کلیک می‌کند اتفاقی بیفتد، خوب است. روی تمرکز

CSS
ورودی (طرح کلی: هیچ‌کدام؛ لایه‌بندی: 12 پیکسل؛ شعاع حاشیه: 3 پیکسل؛ حاشیه: 1 پیکسل سیاه و سفید یکپارچه؛) :: - webkit-input-placeholder (/*Chrome*/رنگ: قرمز؛ انتقال: کدورت 250 میلی‌ثانیه ease-in-out ;): فوکوس:: - webkit-input-placeholder (تاری: 0.5؛): -ms-input-placeholder (/* IE 10+ */ رنگ: قرمز؛ انتقال: کدورت 250 میلی ثانیه ease-in-out;): فوکوس : -ms-input-placeholder (opacity: 0.5;) :: - moz-placeholder (/* Firefox 19+ */ color: قرمز؛ opacity: 1؛ transition: opacity 250ms ease-in-out;): فوکوس:: -moz-placeholder (opacity: 0.5;): -moz-placeholder (/* Firefox 4 - 18 */ color: قرمز؛ opacity: 1؛ transition: opacity 250ms ease-in-out;): تمرکز: -moz-placeholder (تاری: 0.5؛)

در مثال بالا، ما "چند سبک اساسی را روی خود ورودی قرار دادیم، و یک انتقال روی opacity اضافه کردیم تا تجربه کمی بهتر شود. نسخه ی نمایشی را بررسی کنید و با سایر ویژگی ها و انتقال های CSS آزمایش کنید.