در تلاش برای کاهش شکل و کاهش نویز بصری، طراحان برچسب
بدجوری
خوب
یک ظاهر طراحی: تغییر رنگ CSS جای جای
سبک فیلد ورودی را با متغیر css تغییر دهید
بدجوری
اثر مکان نگهدارنده برای
ویژگی Placeholder فقط برای و
یک روش حافظه قدیمی که ارزش جاوا اسکریپت را تغییر می دهد
ویژگی placeholder برای فراخوانی به اقدام در داخل ورودی خالی و عناصر ناحیه متنی استفاده می شود. در این مقاله، به احتمالات استایل دادن به متن مکاندار و همچنین ترفندهایی میپردازیم که آن را راحتتر و کاربردیتر میکنند.
پس بیایید با یک مثال برای کسانی که نمی دانند نگهدارنده مکان چیست شروع کنیم.
html
استایل placeholder-a را می توان با استفاده از مجموعه قوانین 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 (متن سرریز : بیضی؛) چگونه مکاننما را روی فوکوس پنهان کنیم؟
مخفی کردن متغیرهای مکان به روش های مختلفی انجام می شود.
- در برخی از مرورگرها هنگام دریافت فوکوس از طریق ورودی
- در مرورگرهای دیگر اگر حداقل یک کاراکتر وارد شده باشد
من گزینه اول را بیشتر دوست دارم. برای تنظیم این رفتار در همه مرورگرهایی که از متغیرهایی پشتیبانی می کنند، قوانین css زیر را تعریف می کنیم:
css
: فوکوس :: - webkit-input-placeholder (رنگ: شفاف): فوکوس :: - moz-placeholder (رنگ: transparent): تمرکز: -moz-placeholder (رنگ: transparent): تمرکز: -ms-input-placeholder ( رنگ: شفاف) جایگیر را به خوبی پنهان کنید
همچنین میتوانید یک انتقال برای نشان دادن و پنهان کردن مکاندار-a اضافه کنید:
css
/ * تغییر صاف شفافیت متغیرهایی در تمرکز * / .input1 :: - webkit-input-placeholder (تاری: 1؛ انتقال: شفافیت 0.3 ثانیه سهولت؛) .input1 :: - moz-placeholder (تاری: 1؛ انتقال: کدورت: 1؛ انتقال: کدورت: 1 0.3s ease;) .input1: -moz-placeholder (تاری: 1؛ انتقال: opacity 0.3s ease;) .input1: -ms-input-placeholder (تاری: 1؛ انتقال: opacity 0.3s ease;) .input1 : فوکوس :: - webkit-input-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه آسان؛) .input1: فوکوس:: - moz-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛) .input1: فوکوس: -moz-placeholder (opacity: 0; transition: opacity 0.3s ease;) .input1: focus: -ms-input-placeholder (opacity: 0; transition: opacity 0.3s ease;) / * زمانی که مکان نگهدارنده را به سمت راست تغییر دهید فوکوس * / .input2 :: - webkit-input-placeholder (input-input-placeholder (input-text: 0px; transition: text-indent 0.3s easy;) .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 (indent-text: 0px; transition: text-indent 0.3s ease;) .input2: focus :: - webkit-input-placeholder (تست-تورفتگی: 500px؛ انتقال: text-indent 0.3s ease؛) .input2: فوکوس:: - 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 - ارتفاع 0.5 ثانیه سهولت؛) .input3: -ms-input-placeholder (ارتفاع خط: 20 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛) .input3: فوکوس:: - webkit-input-placeholder (ارتفاع خط: 100px ؛ انتقال: ارتفاع خط 0.5 ثانیه ease؛) .input3: فوکوس:: - moz-placeholder (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛) .input3: فوکوس: -moz-placehold er (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛) .input3: فوکوس: -ms-input-placeholder (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛) امیدوارم که برای شما مفید باشد. نظرات و پیشنهادات خود را در کامنت بنویسید.
شبه عنصری که برای استایل دادن به متن راهنمای ابزار ایجاد شده توسط مشخصه مکان نگهدار استفاده می شود. استفاده از خواص برای تغییر ظاهر متن مجاز است، به عنوان مثال، فونت و رنگ را تنظیم کنید.
نحو
انتخابگر:: مکان نگهدار (...)
تعیین ها
شرح مثال
<тип>
نوع ارزش را نشان می دهد. <размер>
A & & B مقادیر باید به ترتیب نشان داده شده نمایش داده شوند. <размер> && <цвет>
A | ب نشان می دهد که فقط یکی از مقادیر پیشنهادی باید انتخاب شود (A یا B). عادی | کلاه های کوچک
الف || ب هر مقدار را می توان به تنهایی یا همراه با دیگران به هر ترتیبی استفاده کرد. عرض || شمردن
مقادیر گروه ها [زراعت || صلیب]
*
صفر یا چند بار تکرار کنید. [,<время>]*
+
یک یا چند بار تکرار کنید. <число>+
?
نوع، کلمه یا گروه مشخص شده اختیاری است. درونی؟
(الف، ب) حداقل A را تکرار کنید، اما نه بیشتر از B بار. <радиус>{1,4}
#
یک یا چند بار با کاما جدا شده تکرار کنید. <время>#
مثال
نگهدارنده مکان
نتیجه مثال در شکل نشان داده شده است. یکی
برنج. 1. استفاده :: جایگیر
توجه داشته باشید
اینترنت اکسپلورر از شبه کلاس استفاده می کند: -ms-input-placeholder.
مایکروسافت اج از شبه عنصر :: - ms-input-placeholder استفاده می کند.
Chrome قبل از 57، Opera قبل از 44، Safari قبل از 10.1، و Android از :: - webkit-input-placeholder شبه عنصر استفاده می کنند.
فایرفاکس 4 تا 19 از کلاس شبه -moz-placeholder استفاده می کند.
فایرفاکس قبل از نسخه 51 از عنصر :: - moz-placeholder استفاده می کند.
مرورگرها
مرورگرها
قراردادهای زیر در جدول مرورگر استفاده می شود.
اگر با ویژگی placeholder آشنا نیستید، بیایید کمی توضیح دهیم که چیست و کجا استفاده می شود. در فیلدهای ورودی فرم استفاده می شود. این ویژگی یک کتیبه را در فیلد ورودی نمایش می دهد که نشان دهنده نقش یک اشاره است. قبلاً در سایت ما نمونه ای با استفاده از جاوا اسکریپت وجود داشت، جنبه مثبت این روش سازگاری بین مرورگرها است. حالا بیایید در مورد استایل کردن ویژگی placeholder که در عناصر ورودی و textarea استفاده میشود صحبت کنیم.
کد فیلد ورودی در مثال ما چیزی شبیه به این خواهد بود:
در خروجی، فیلد زیر را دریافت می کنیم:
حالا بیایید تصور کنیم که باید به مکان نگهدار استایل دهیم، برای این کار باید مجموعه ای از قوانین را در CSS بنویسیم:
:: - webkit-input-placeholder (رنگ: # c1c1c1;) :: - moz-placeholder (رنگ: # c1c1c1;) / * Firefox 19+ * /: -moz-placeholder (رنگ: # c1c1c1;) / * فایرفاکس 18- * /: -ms-input-placeholder (رنگ: # c1c1c1;)
ما گرفتیم:
ما نمیتوانیم همه ویژگیها را تغییر دهیم، اما فهرستی از اکثر آنها که توسط مرورگرهای مدرن پشتیبانی میشوند در زیر آمده است:
فونت(همچنین خواص مرتبط)
زمینه(همچنین خواص مرتبط)
رنگ
فاصله کلمات
فاصله بین حروف
متن-تزیین
تراز عمودی
تبدیل متن
ارتفاع خط
تورفتگی متن
سرریز متن
کدورت
این قانون در مرورگرهای مختلف متفاوت نوشته شده است. تا زمانی که یک استاندارد واحد وجود نداشته باشد، این مجموعه از رکوردها همچنان مرتبط هستند. در مرورگر اینترنت اکسپلورر، و همچنین در فایرفاکس زیر نسخه 18، مکان نگهدارنده به عنوان یک شبه کلاس و در مرورگرهای جدید فایرفاکس، وب کیت و چشمک به عنوان یک شبه عنصر در نظر گرفته می شود.
کوچک شدن متن در محل نگهدارنده
گاهی اوقات راهنمایی ها می توانند آنقدر طولانی باشند که نمی توانند به طور کامل در قسمت ورودی قرار بگیرند. برای این منظور، می توانید از ویژگی های اضافی نیز استفاده کنید که متن مکان نگهدار را در قسمت ورودی کوتاه می کند.
ورودی (متن سرریز: بیضی؛) ورودی :: - moz-placeholder (متن-سرریز: بیضی؛) ورودی: -moz-placeholder (متن-سرریز: بیضی؛) ورودی: -ms-input-placeholder (متن-سرریز : بیضی؛)
در نتیجه، یک فیلد ورودی با یک مکان نگهدار مانند زیر دریافت می کنیم:
هنگام کلیک کردن روی یک فیلد، متن را مخفی کنید
بهطور پیشفرض، هر مرورگر واکنشهای نگهدارنده مکان را متفاوت تفسیر میکند. در برخی از مرورگرها با کلیک بر روی فیلد بلافاصله پنهان می شود، در برخی دیگر اگر حداقل یک کاراکتر در قسمت ورودی وجود داشته باشد پنهان می شود. بیایید طوری تنظیم کنیم که متن هنگام کلیک کردن روی فیلد پنهان شود، در همه مرورگرها یکسان است.
: فوکوس :: - webkit-input-placeholder (رنگ: شفاف؛): فوکوس :: - moz-placeholder (رنگ: شفاف؛): فوکوس: -moz-placeholder (رنگ: شفاف؛): فوکوس: -ms-input جایگیر (رنگ: شفاف؛)
ما این عمل را دریافت می کنیم:
Placeholder یک شبه کلاس یا شبه عنصر است که وظیفه نمایش نام فیلد را بر عهده دارد. در هسته آن، این تگ است (بیایید برای سادگی آن را چنین بنامیم) که در آن کلمه ای را وارد می کنید و کاربر آن را در داخل می بیند. نوعی اشاره یا نام برای هر فیلد فرم.
هر مرورگر به طور متفاوتی با این تگ برخورد می کند و استایل آن چیزهای زیادی را برای شما به ارمغان می آورد. برای تغییر سبک های پیش فرض، کافی است چند خط کد به شیوه نامه اضافه کنید. هیچ چیز پیچیده ای وجود ندارد.
درست است، باید در نظر داشت که همه ما نمی توانیم تغییر کنیم.
در میان انواع سبک ها، در این مورد، موارد زیر در دسترس ما است:
- font-weight - تنظیم وزن متن
- font-size - اندازه متن را انتخاب کنید
- font-family - انتخاب فونت
- پس زمینه - پس زمینه و تصویر پس زمینه
- رنگ - رنگ متن
- فاصله بین کلمات - فاصله بین کلمات را تعیین می کند
- فاصله حروف - فاصله بین حروف را تنظیم می کند
- متن-دکوراسیون - انتخاب دکوراسیون کلمه. زیر خط، خط خط و غیره
- 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 ثانیه سهولت؛)
ورودی :: - moz-placeholder (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
ورودی: -moz-placeholder (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
.input: -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 فقط برای و
یک روش حافظه قدیمی که ارزش جاوا اسکریپت را تغییر می دهد
ویژگی placeholder برای فراخوانی به اقدام در داخل ورودی خالی و عناصر ناحیه متنی استفاده می شود. در این مقاله، به احتمالات استایل دادن به متن مکاندار و همچنین ترفندهایی میپردازیم که آن را راحتتر و کاربردیتر میکنند.
پس بیایید با یک مثال برای کسانی که نمی دانند نگهدارنده مکان چیست شروع کنیم.
html
استایل placeholder-a را می توان با استفاده از مجموعه قوانین 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 (متن سرریز : بیضی؛)چگونه مکاننما را روی فوکوس پنهان کنیم؟
مخفی کردن متغیرهای مکان به روش های مختلفی انجام می شود.
- در برخی از مرورگرها هنگام دریافت فوکوس از طریق ورودی
- در مرورگرهای دیگر اگر حداقل یک کاراکتر وارد شده باشد
من گزینه اول را بیشتر دوست دارم. برای تنظیم این رفتار در همه مرورگرهایی که از متغیرهایی پشتیبانی می کنند، قوانین css زیر را تعریف می کنیم:
css
: فوکوس :: - webkit-input-placeholder (رنگ: شفاف): فوکوس :: - moz-placeholder (رنگ: transparent): تمرکز: -moz-placeholder (رنگ: transparent): تمرکز: -ms-input-placeholder ( رنگ: شفاف)جایگیر را به خوبی پنهان کنید
همچنین میتوانید یک انتقال برای نشان دادن و پنهان کردن مکاندار-a اضافه کنید:
css
/ * تغییر صاف شفافیت متغیرهایی در تمرکز * / .input1 :: - webkit-input-placeholder (تاری: 1؛ انتقال: شفافیت 0.3 ثانیه سهولت؛) .input1 :: - moz-placeholder (تاری: 1؛ انتقال: کدورت: 1؛ انتقال: کدورت: 1 0.3s ease;) .input1: -moz-placeholder (تاری: 1؛ انتقال: opacity 0.3s ease;) .input1: -ms-input-placeholder (تاری: 1؛ انتقال: opacity 0.3s ease;) .input1 : فوکوس :: - webkit-input-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه آسان؛) .input1: فوکوس:: - moz-placeholder (تاری: 0؛ انتقال: کدورت 0.3 ثانیه سهولت؛) .input1: فوکوس: -moz-placeholder (opacity: 0; transition: opacity 0.3s ease;) .input1: focus: -ms-input-placeholder (opacity: 0; transition: opacity 0.3s ease;) / * زمانی که مکان نگهدارنده را به سمت راست تغییر دهید فوکوس * / .input2 :: - webkit-input-placeholder (input-input-placeholder (input-text: 0px; transition: text-indent 0.3s easy;) .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 (indent-text: 0px; transition: text-indent 0.3s ease;) .input2: focus :: - webkit-input-placeholder (تست-تورفتگی: 500px؛ انتقال: text-indent 0.3s ease؛) .input2: فوکوس:: - 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 - ارتفاع 0.5 ثانیه سهولت؛) .input3: -ms-input-placeholder (ارتفاع خط: 20 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛) .input3: فوکوس:: - webkit-input-placeholder (ارتفاع خط: 100px ؛ انتقال: ارتفاع خط 0.5 ثانیه ease؛) .input3: فوکوس:: - moz-placeholder (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛) .input3: فوکوس: -moz-placehold er (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛) .input3: فوکوس: -ms-input-placeholder (ارتفاع خط: 100 پیکسل؛ انتقال: ارتفاع خط 0.5 ثانیه سهولت؛)امیدوارم که برای شما مفید باشد. نظرات و پیشنهادات خود را در کامنت بنویسید.
شبه عنصری که برای استایل دادن به متن راهنمای ابزار ایجاد شده توسط مشخصه مکان نگهدار استفاده می شود. استفاده از خواص برای تغییر ظاهر متن مجاز است، به عنوان مثال، فونت و رنگ را تنظیم کنید.
نحو
انتخابگر:: مکان نگهدار (...)
تعیین ها
شرح | مثال | |
---|---|---|
<тип> | نوع ارزش را نشان می دهد. | <размер> |
A & & B | مقادیر باید به ترتیب نشان داده شده نمایش داده شوند. | <размер> && <цвет> |
A | ب | نشان می دهد که فقط یکی از مقادیر پیشنهادی باید انتخاب شود (A یا B). | عادی | کلاه های کوچک |
الف || ب | هر مقدار را می توان به تنهایی یا همراه با دیگران به هر ترتیبی استفاده کرد. | عرض || شمردن |
مقادیر گروه ها | [زراعت || صلیب] | |
* | صفر یا چند بار تکرار کنید. | [,<время>]* |
+ | یک یا چند بار تکرار کنید. | <число>+ |
? | نوع، کلمه یا گروه مشخص شده اختیاری است. | درونی؟ |
(الف، ب) | حداقل A را تکرار کنید، اما نه بیشتر از B بار. | <радиус>{1,4} |
# | یک یا چند بار با کاما جدا شده تکرار کنید. | <время># |
مثال
نتیجه مثال در شکل نشان داده شده است. یکی
برنج. 1. استفاده :: جایگیر
توجه داشته باشید
اینترنت اکسپلورر از شبه کلاس استفاده می کند: -ms-input-placeholder.
مایکروسافت اج از شبه عنصر :: - ms-input-placeholder استفاده می کند.
Chrome قبل از 57، Opera قبل از 44، Safari قبل از 10.1، و Android از :: - webkit-input-placeholder شبه عنصر استفاده می کنند.
فایرفاکس 4 تا 19 از کلاس شبه -moz-placeholder استفاده می کند.
فایرفاکس قبل از نسخه 51 از عنصر :: - moz-placeholder استفاده می کند.
مرورگرها
مرورگرها
قراردادهای زیر در جدول مرورگر استفاده می شود.
اگر با ویژگی placeholder آشنا نیستید، بیایید کمی توضیح دهیم که چیست و کجا استفاده می شود. در فیلدهای ورودی فرم استفاده می شود. این ویژگی یک کتیبه را در فیلد ورودی نمایش می دهد که نشان دهنده نقش یک اشاره است. قبلاً در سایت ما نمونه ای با استفاده از جاوا اسکریپت وجود داشت، جنبه مثبت این روش سازگاری بین مرورگرها است. حالا بیایید در مورد استایل کردن ویژگی placeholder که در عناصر ورودی و textarea استفاده میشود صحبت کنیم.
کد فیلد ورودی در مثال ما چیزی شبیه به این خواهد بود:
در خروجی، فیلد زیر را دریافت می کنیم:
حالا بیایید تصور کنیم که باید به مکان نگهدار استایل دهیم، برای این کار باید مجموعه ای از قوانین را در CSS بنویسیم:
:: - webkit-input-placeholder (رنگ: # c1c1c1;) :: - moz-placeholder (رنگ: # c1c1c1;) / * Firefox 19+ * /: -moz-placeholder (رنگ: # c1c1c1;) / * فایرفاکس 18- * /: -ms-input-placeholder (رنگ: # c1c1c1;)
ما گرفتیم:
ما نمیتوانیم همه ویژگیها را تغییر دهیم، اما فهرستی از اکثر آنها که توسط مرورگرهای مدرن پشتیبانی میشوند در زیر آمده است:
فونت(همچنین خواص مرتبط)
زمینه(همچنین خواص مرتبط)
رنگ
فاصله کلمات
فاصله بین حروف
متن-تزیین
تراز عمودی
تبدیل متن
ارتفاع خط
تورفتگی متن
سرریز متن
کدورت
این قانون در مرورگرهای مختلف متفاوت نوشته شده است. تا زمانی که یک استاندارد واحد وجود نداشته باشد، این مجموعه از رکوردها همچنان مرتبط هستند. در مرورگر اینترنت اکسپلورر، و همچنین در فایرفاکس زیر نسخه 18، مکان نگهدارنده به عنوان یک شبه کلاس و در مرورگرهای جدید فایرفاکس، وب کیت و چشمک به عنوان یک شبه عنصر در نظر گرفته می شود.
کوچک شدن متن در محل نگهدارنده
گاهی اوقات راهنمایی ها می توانند آنقدر طولانی باشند که نمی توانند به طور کامل در قسمت ورودی قرار بگیرند. برای این منظور، می توانید از ویژگی های اضافی نیز استفاده کنید که متن مکان نگهدار را در قسمت ورودی کوتاه می کند.
ورودی (متن سرریز: بیضی؛) ورودی :: - moz-placeholder (متن-سرریز: بیضی؛) ورودی: -moz-placeholder (متن-سرریز: بیضی؛) ورودی: -ms-input-placeholder (متن-سرریز : بیضی؛)
در نتیجه، یک فیلد ورودی با یک مکان نگهدار مانند زیر دریافت می کنیم:
هنگام کلیک کردن روی یک فیلد، متن را مخفی کنید
بهطور پیشفرض، هر مرورگر واکنشهای نگهدارنده مکان را متفاوت تفسیر میکند. در برخی از مرورگرها با کلیک بر روی فیلد بلافاصله پنهان می شود، در برخی دیگر اگر حداقل یک کاراکتر در قسمت ورودی وجود داشته باشد پنهان می شود. بیایید طوری تنظیم کنیم که متن هنگام کلیک کردن روی فیلد پنهان شود، در همه مرورگرها یکسان است.
: فوکوس :: - webkit-input-placeholder (رنگ: شفاف؛): فوکوس :: - moz-placeholder (رنگ: شفاف؛): فوکوس: -moz-placeholder (رنگ: شفاف؛): فوکوس: -ms-input جایگیر (رنگ: شفاف؛)
ما این عمل را دریافت می کنیم:
Placeholder یک شبه کلاس یا شبه عنصر است که وظیفه نمایش نام فیلد را بر عهده دارد. در هسته آن، این تگ است (بیایید برای سادگی آن را چنین بنامیم) که در آن کلمه ای را وارد می کنید و کاربر آن را در داخل می بیند. نوعی اشاره یا نام برای هر فیلد فرم.
هر مرورگر به طور متفاوتی با این تگ برخورد می کند و استایل آن چیزهای زیادی را برای شما به ارمغان می آورد. برای تغییر سبک های پیش فرض، کافی است چند خط کد به شیوه نامه اضافه کنید. هیچ چیز پیچیده ای وجود ندارد.
درست است، باید در نظر داشت که همه ما نمی توانیم تغییر کنیم.
در میان انواع سبک ها، در این مورد، موارد زیر در دسترس ما است:
- font-weight - تنظیم وزن متن
- font-size - اندازه متن را انتخاب کنید
- font-family - انتخاب فونت
- پس زمینه - پس زمینه و تصویر پس زمینه
- رنگ - رنگ متن
- فاصله بین کلمات - فاصله بین کلمات را تعیین می کند
- فاصله حروف - فاصله بین حروف را تنظیم می کند
- متن-دکوراسیون - انتخاب دکوراسیون کلمه. زیر خط، خط خط و غیره
- 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 ثانیه سهولت؛)
ورودی :: - moz-placeholder (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
ورودی: -moz-placeholder (تاری: 1؛ انتقال: کدورت 0.3 ثانیه سهولت؛)
.input: -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؛)
با این روش های ساده، می توانید یک طرح فرم واقعا زیبا بسازید.