Заместителите, които са подобни на текста на елементите в средата, могат да бъдат ниби по стил. За щастие ние „набрахме кратко, но ефективно CSS решение, за да стилизираме текста на мястото за въвеждане на вашия вход, без значение колко цветен и несигурен сте. Прочетете за кода.
Промяна на цвета на текста на заместителя
Нека започнем с просто въвеждане и малко заместващ текст, за този пример ще използваме думата "търсене", но можете да използвате всичко, което искате. Основният HTML е по-долу:
HTML
Заместващият текст за въвеждане (и текстово поле) по подразбиране е с по-светъл цвят, така че можете да ги промените с някои CSS редове. Тук можем да изберем текста, да изберем цвета на HTML за името или какъвто и да е цвят за изходния метод (HEX, RGB, HSL).
css
::-webkit-input-placeholder ( /* Chrome */ цвят: червен; ) :-ms-input-placeholder ( /* IE 10+ */ цвят: червен; ) ::-moz-placeholder ( /* Firefox 19 + */ цвят: червен; непрозрачност: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ цвят: червен; непрозрачност: 1; )Очевидно е важно да включите различни корекции на актуализации, за да поддържате възможно най-много браузъри.
Промяна на цвета на текста на фокуса за място
Точно така, ние успешно променихме цветовете на текста на черен, но би било по-мило, като mittevo zavantazhenі, ако бутоните ви са в средата на нашето известие. на фокус.
css
вход (очертание: няма; запълване: 12px; радиус на границата: 3px; граница: 1px плътно черен;) ::-webkit-input-placeholder ( /* Chrome */ цвят: червен; преход: непрозрачност 250ms лесно извеждане ; ) :focus::-webkit-input-placeholder ( непрозрачност: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ цвят: червен; преход: непрозрачност 250ms лекота на влизане; ) :focus :-ms-input-placeholder ( непрозрачност: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ цвят: червен; непрозрачност: 1; преход: непрозрачност 250ms лекота на влизане; ) :focus:: -moz-placeholder ( непрозрачност: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ цвят: червен; непрозрачност: 1; преход: непрозрачност 250ms лекота на влизане; ) : фокус: -moz-placeholder ( непрозрачност: 0,5; )Текстът има все повече и повече от основните стилове на входа на йога себе си и те искат преход към непрозрачност, така че животът на един добър хубавец да расте.
Placeholder - елемент от полето за въвеждане, за който можете да поставите намек. Ако ползавачът започне да въвежда данни, допълнителният текст е известен, за да не се плаши. Браузърът на кожата може да измисли как да изобрази следващия елемент и понякога стиловете по подразбиране нарушават целия дизайн. За да се справите с тях, трябва да използвате специално CSS правило за място.
Къде се намира заместителят?
Проблемът е, че подсказката за полето за въвеждане е безнадеждно скрита в сенчестия DOM и не е толкова лесна за достъп. Има специален нестандартен псевдоелемент CSS::placeholder, за който да спечелите. С йога, с помощта на помощ, можете да използвате силата на съвета.
Ще ви е интересно:
Стилът на CSS заместител изглежда така:
input::placeholder (цвят: червен; непрозрачност: 1; стил на шрифта: курсив; ) 
Поддръжка от браузъри
CSS placeholder е добре обработен от всички съвременни браузъри и за старомодни хора, можете да го ускорите с префикси:
- ::-webkit-input-placeholder - за уебкит браузъри (Safari, Chrome, Opera);
- ::-moz-placeholder - за Браузъри Firefoxпо-висока версия 19;
- :-moz-placeholder - за стар Firefox;
- :-ms-input-placeholder - за Internet Explorerпо-висока версия 10.
Явно стар Браузъри Mozilla, а IE също зачита заместителя като CSS псевдоклас, а не псевдоелемент. Няма да ги сравняваме, просто вземаме предвид целия аспект, когато стилизираме полето за въвеждане.
Възможности за стилизиране
За псевдоелемента за място в CSS можете да зададете следните параметри:
- фон - група от фонови сили. Фонът на блока за подсказки се разширява през цялото поле за въвеждане. Можете да зададете както цвета (фонов цвят), така и изображението (фоново изображение).
- цвят на текста - цвят;
- прозрачност - непрозрачност;
- podkreslennya, nadkreslennya или zakreslennya - текст-украса;
- регистър - преобразуване на текст;
- вътрешни стъпки- Подложка. Не се поддържа от всички браузъри. Що се отнася до малките елементи, горните и долните стъпала се игнорират.
- към шрифта - силата на шрифтовата група, височината на реда и различните стъпки (текст-отстъп, буквен интервал, интервал между думите);
- вертикално подравняване в ред - вертикално-подравняване;
- препълване на текст, когато контейнерът е препълнен – текст-препълване.
Input1::placeholder ( background-image: linear-gradient(lime, blue); color: white; ) .input2::placeholder ( text-decoration: line-through; ::placeholder (font-size: 16px; letter-spacing) : 10px; ) .input4::placeholder ( фон: кафяв; цвят: бял; преливане на текст: многоточие; )
Фокус
За zamovchuvannyam, подсказката е известна от полето за въвеждане само в този случай, ако е въведен само един знак. В допълнение, псевдоелементът CSS placeholder ви позволява да внедрите двойно щракване при фокусиране върху поле. За кого е необходимо да използвате йога от псевдокласа: фокус.
input:focus::placeholder (цвят: прозрачен; )
В някои браузъри можете да анимирате промяна в редица правомощия за място след допълнителна инструкция за преход.
input::placeholder (цвят: черен; преход: цвят 1s; ) input:focus::placeholder (цвят: бял; )
AT Google браузърЦветът на хромирания намек при фокусиране върху такова поле плавно се променя със закъснение от една секунда.
Ако не знаете за атрибута placeholder, нека обясним какво представлява и как работи. Победа в полетата за въвеждане на формуляра. Атрибутът за показване се записва в полето за въвеждане, което представлява ролята на подкана за пеене. По-рано на нашия уебсайт, но за помощта на javascript, положителната страна даден метод ce крос-браузър. Сега нека поговорим за стилизирането на атрибута placeholder, който е включен в елементите за въвеждане и текстово поле.
Кодът на полето за въвеждане в нашето приложение изглежда така:
На изхода вземаме следното поле:
Сега нека изясним какво трябва да стилизираме заместващия елемент, за който трябва да напишем набор от CSS правила:
::-webkit-input-placeholder (цвят: #c1c1c1; ) ::-moz-placeholder (цвят: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder (цвят: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder (цвят: #c1c1c1; )
Ние взимаме:
Можем да променим не всички власти, но списък с повече от тях, които се поддържат от съвременните браузъри, е изброен по-долу:
шрифт(така че сумата на мощността)
заден план(така че сумата на мощността)
цвят
разстояние между думите
буквен интервал
текст-украса
вертикално подравняване
преобразуване на текст
височина на линията
текстов отстъп
препълване на текст
непрозрачност
В различните браузъри правилото е написано по различен начин, т.к Въпреки че няма единен стандарт, този набор от записи ще продължи да бъде актуален. В браузърите на IE, както и във версиите на Firefox под 18, заместителят се третира като псевдоклас, а в по-новите браузъри Firefox webkit и blink се третират като псевдоелемент.
Кратък текст в заместител
Някои съвети могат да бъдат толкова ценни, че да не могат да се поберат в полето за въвеждане. За тези цели можете също да ускорите с допълнителни правомощия, т.е. да ви позволите да ускорите текста за място в полето за въвеждане.
Input ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow : многоточие ;)
В резултат на това се приема поле за въвеждане на такъв заместител от следния формуляр:
Privuemo текст pid hour щракнете върху полето
Браузърът интерпретира реакцията на заместителя зад прозореца, когато кожата е затворена. В някои браузъри искате да спечелите наведнъж, когато ударите полето, в други браузъри искате един знак в полето за въвеждане за очевидност. Нека го направим по този начин, така че текстът да се показва, когато щракнете върху полето, обаче във всички браузъри.
:focus::-webkit-input-placeholder ( цвят: прозрачен; ) :focus::-moz-placeholder ( цвят: прозрачен; ) :focus:-moz-placeholder ( цвят: прозрачен; ) :focus:-ms-input -заместител (цвят: прозрачен; )
Ние предприемаме следните действия:
Placeholder - елемент от полето за въвеждане, за който можете да поставите намек. Ако ползавачът започне да въвежда данни, допълнителният текст е известен, за да не се плаши. Браузърът на кожата може да измисли как да изобрази следващия елемент и понякога стиловете по подразбиране нарушават целия дизайн. За да се справите с тях, трябва да използвате специално CSS правило за място.
Къде се намира заместителят?
Проблемът е, че подсказката за полето за въвеждане е безнадеждно скрита в сенчестия DOM и не е толкова лесна за достъп. За тази победна специалност нестандартен ::placeholder. С йога, с помощта на помощ, можете да използвате силата на съвета.
Стилът на CSS заместител изглежда така:
Input::placeholder (цвят: червен; непрозрачност: 1; стил на шрифта: курсив; )
Поддръжка от браузъри
CSS placeholder е добре обработен от всички съвременни браузъри и за старомодни хора, можете да го ускорите с префикси:
- ::-webkit-input-placeholder - за уебкит браузъри (Safari, Chrome, Opera);
- ::-moz-placeholder - за браузъри във Firefox по-висока версия 19;
- :-moz-placeholder - за стар Firefox;
- :-ms-input-placeholder – за Internet Explorer версия 10.
Както можете да видите, старите браузъри на Mozilla, както и IE, зачитат заместителя с CSS псевдоклас, а не псевдоелемент. Няма да ги сравняваме, просто вземаме предвид целия аспект, когато стилизираме полето за въвеждане.
Възможности за стилизиране
За псевдоелемента за място в CSS можете да зададете следните параметри:
- фон - групата на блока за подсказки се разширява в цялото поле за въвеждане. Можете да зададете както цвета (фонов цвят), така и изображението (фоново изображение).
- цвят на текста - цвят;
- прозрачност - непрозрачност;
- podkreslennya, nadkreslennya или zakreslennya - текст-украса;
- регистър - преобразуване на текст;
- вътрешни стъпала - подплънки. Не се поддържа от всички браузъри. Що се отнася до малките елементи, горните и долните стъпала се игнорират.
- към шрифта - силата на шрифтовата група, височината на реда и различните стъпки (текст-отстъп, буквен интервал, интервал между думите);
- вертикално подравняване в ред - вертикално-подравняване;
- препълване на текст, когато контейнерът е препълнен – текст-препълване.
Фокус
За zamovchuvannyam, подсказката е известна от полето за въвеждане само в този случай, ако е въведен само един знак. Ale placeholder ви позволява да приложите външния вид в ред, когато се фокусирате върху полето. За кого е необходимо да използвате йога от псевдокласа: фокус.
Input:focus::placeholder (цвят: прозрачен; )
В някои браузъри можете да анимирате промяна в редица правомощия за място след допълнителна инструкция за преход.
Input::placeholder (цвят: черен; преход: цвят 1s; ) input:focus::placeholder (цвят: бял; )
В браузъра Google Chromeцветът на подсказката при фокусиране върху такова поле плавно се променя с период от една секунда.
Псевдоелемент, за чиято помощ се моли стилен дизайнУказва текста, създаден от атрибута placeholder. Позволено е да спечелите властта да промените външния вид на текста, например да вмъкнете шрифта и цвета.
Синтаксис
Селектор::заместител ( ... )
Назначаване
| Описание | дупето | |
|---|---|---|
| <тип> | Посочете типа на стойността. | <размер> |
| A&&B | Стойността може да се показва в посочения ред. | <размер> && <цвет> |
| A | Б | Моля, посочете, че трябва да изберете само една стойност от предложенията (A или B). | нормално | малки букви |
| A || Б | Кожните значения могат да бъдат завладени самостоятелно или заедно с други в достатъчен ред. | ширина || броя |
| Група от ценности. | [изрязване || кръст] | |
| * | Повторете нула или повече пъти. | [,<время>]* |
| + | Повторете един или повече пъти. | <число>+ |
| ? | Тип задание, думата чи група не е obov'yazkovim. | вмъкване? |
| (А, Б) | Повторете не по-малко от A, но не повече от B пъти. | <радиус>{1,4} |
| # | Повторете един или повече пъти през кого. | <время># |
дупето
Резултатът от приклада е показан на фиг. един.
Ориз. 1. Wikisource::placeholder
Забележка
Internet Explorer има псевдоклас :-ms-input-placeholder.
Псевдоелемент на маркера на Microsoft Edge ::-ms-input-placeholder.
Chrome преди версия 57, Opera преди версия 44, Safari преди версия 10.1 и Android подчертават псевдоелемента ::-webkit-input-placeholder.
Версии на Firefox от 4 до 19 използват псевдокласа :-moz-placeholder.
Firefox преди версия 51 лош псевдоелемент ::-moz-placeholder.
браузъри
браузъри
Таблиците на браузъра имат същите стойности.
