Внешний вид названия полей или как изменить placeholder. Добавляем CSS стиль для placeholder А что делать с бразуерами, которые не поддерживают атрибут placeholder в input

Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения.

Плохо

Хорошо

Стилизация: изменить цвет placeholder CSS

Поменять стиль поля ввода с placeholder CSS

Плохо

Эффект placeholder для

Атрибут placeholder работает только для и , даже если у других тегов указан атрибут contenteditable . </p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="Можно ввести текст" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="Можно ввести текст" class="raz"></div> <h2>Древний метод на память, изменяющий value JavaScript</h2> <input onblur="this.value=(this.value==" onfocus="this.value=(this.value==this.title)?" value="Email" title="Email"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="Email" title="Email" /> <p>Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.</p> <p>Итак, начнем с примера для тех, кто не знает, что такое placeholder.</p> <h4>html</h4> <input type="text" placeholder="Оставьте сообщение здесь"> <p>Стиль placeholder-a можно изменить с помощью такого набора css правил:</p> <h4>css</h4> ::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */ :-moz-placeholder {color:#c0392b;}/* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;} <p>Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.</p> <p>В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.</p> <p>Смотрим, что получилось:</p> <p>Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:</p> <ul><li>font (и сопутствующие свойства)</li> <li>background (и сопутствующие свойства)</li> <li>color</li> <li>word-spacing</li> <li>letter-spacing</li> <li>text-decoration</li> <li>vertical-align</li> <li>text-transform</li> <li>line-height</li> <li>text-indent</li> <li>text-overflow</li> <li>opacity</li> </ul><h2>А если placeholder не вмещается?</h2> <p>Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis . Такой синтаксис будет работать во всех новых браузерах.</p> <h4>css</h4> input {text-overflow:ellipsis;} input::-moz-placeholder {text-overflow:ellipsis;} input:-moz-placeholder {text-overflow:ellipsis;} input:-ms-input-placeholder {text-overflow:ellipsis;} <h2>Как скрыть placeholder при фокусе?</h2> <p>Скрывание placeholder-а происходит по-разному.</p> <ol><li>в некоторых браузерах при получении фокуса инпутом</li> <li>в других браузерах при наличии хотя бы одного введенного символа</li> </ol><p>Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:</p> <h4>css</h4> :focus::-webkit-input-placeholder {color: transparent} :focus::-moz-placeholder {color: transparent} :focus:-moz-placeholder {color: transparent} :focus:-ms-input-placeholder {color: transparent} <h2>Скрываем placeholder красиво</h2> <p>Можно также добавить transition для появления и скрытия placeholder-a:</p> <h4>css</h4> /* плавное изменение прозрачности placeholder-а при фокусе */ .input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1::-moz-placeholder {opacity: 1; transition: 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;} .input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} /* сдвиг placeholder-а вправо при фокусе*/ .input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} /* сдвиг placeholder-а вниз при фокусе*/ .input3::-webkit-input-placeholder {line-height: 20px; transition: line-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 0.5s ease;} .input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} <p>Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.</p> <p>Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder . Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.</p><h2>Синтаксис <i> </i></h2><p><i>Селектор </i>::placeholder { ... }</p><active.sync><h2>Обозначения</h2><table><tbody><tr><th> </th><th>Описание </th><th style="width: 130px">Пример </th> </tr><tr><td><тип> </td><td>Указывает тип значения. </td><td><размер> </td> </tr><tr><td>A && B </td><td>Значения должны выводиться в указанном порядке. </td><td><размер> && <цвет> </td> </tr><tr><td>A | B </td><td>Указывает, что надо выбрать только одно значение из предложенных (A или B). </td><td>normal | small-caps </td> </tr><tr><td>A || B </td><td>Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. </td><td>width || count </td> </tr><tr><td> </td><td>Группирует значения. </td><td>[ crop || cross ] </td> </tr><tr><td>* </td><td>Повторять ноль или больше раз. </td><td>[,<время>]* </td> </tr><tr><td>+ </td><td>Повторять один или больше раз. </td><td><число>+ </td> </tr><tr><td>? </td><td>Указанный тип, слово или группа не является обязательным. </td><td>inset? </td> </tr><tr><td>{A, B} </td><td>Повторять не менее A, но не более B раз. </td><td><радиус>{1,4} </td> </tr><tr><td># </td><td>Повторять один или больше раз через запятую. </td><td><время># </td> </tr></tbody></table><h2>Пример</h2><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>placeholder</title> <style> body { background: #053f38; } input { border: 1px solid #98baba; /* Параметры рамки */ background: transparent; /* Прозрачный фон */ padding: 1px 4px; /* Поля вокруг текста */ color: #fff; /* Цвет текста */ } input::-moz-placeholder { color: #ffd595; /* Цвет подсказывающего текста */ } input::-webkit-input-placeholder { color: #ffd595; } input:-ms-input-placeholder { color: #ffd595; } input::-ms-input-placeholder { color: #ffd595; } input::placeholder { color: #ffd595; } </style> </head> <body> <form action="handler.php"> <p><input type="search" placeholder="Поиск по сайту" name="q"> <input type="submit" value="Найти"></p> </form> </body> </html> </p><p>Результат примера показан на рис. 1.</p><p>Рис. 1. Использование::placeholder</p><h2>Примечание</h2><p>Internet Explorer использует псевдокласс :-ms-input-placeholder .</p><p>Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .</p><p>Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder .</p><p>Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder .</p><p>Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .</p><h2>Браузеры <i> </i></h2><p><b-tabs type="is-boxed"><b-tab-item label="Настольные" icon="icon-desktop" icon-pack="icon"></b-tab-item></b-tabs></p><active.sync><h2>Браузеры</h2><p>В таблице браузеров применяются следующие обозначения.</p></active.sync></active.sync> <p>Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с с помощью javascript, положительная сторона данного метода это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в элементах input и textarea.<br> Код поля ввода в нашем примере будет выглядеть примерно так:</p><p> <input type="text" placeholder="Введите ваше имя"> </p><p>На выходе мы получает такое поле: <input type="text" placeholder="Введите ваше имя"></p> <p>Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:</p><p> ::-webkit-input-placeholder { color: #c1c1c1; } ::-moz-placeholder { color: #c1c1c1; } /* Firefox 19+ */ :-moz-placeholder { color: #c1c1c1; } /* Firefox 18- */ :-ms-input-placeholder { color: #c1c1c1; } </p><p>Получаем: <input class="plc" type="text" placeholder="Введите ваше имя"></p> <p>Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:<br><b>font </b> (так же смежные свойства)<br><b>background </b> (так же смежные свойства)<br><b>color </b><br><b>word-spacing </b><br><b>letter-spacing </b><br><b>text-decoration </b><br><b>vertical-align </b><br><b>text-transform </b><br><b>line-height </b><br><b>text-indent </b><br><b>text-overflow </b><br><b>opacity </b></p> <p>В разных браузерах правило пишется по разному, т.к. пока нет единого стандарта, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых браузерах firefox, webkit и blink воспринимается как псевдоэлемент.</p><p><b>Сокращение текста в placeholder </b><br> Иногда подсказки могут быть такой длины, что не способны полностью поместиться в поле ввода. Для этих целей можно так же воспользоваться дополнительными свойствами, которые позволят сократить текст placeholder-а в поле ввода.</p><p>Input { text-overflow:ellipsis; } input::-moz-placeholder { text-overflow:ellipsis; } input:-moz-placeholder { text-overflow:ellipsis; } input:-ms-input-placeholder { text-overflow:ellipsis; } </p><p>В результате получаем поле ввода такого с placeholder такого вида: <input class="plc2" type="text" placeholder="Введите ваше имя"></p><p><b>Скрываем текст при клике по полю </b><br> По умолчанию каждый браузер интерпретирует реакцию placeholder-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.</p><p> :focus::-webkit-input-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; } </p><p>Получаем такое действо: </p> <p>Placeholder — псевдокласс или псевдоэлемент, который отвечает за вывод названия поля. По своей сути это тот тег (назовем его так для простоты) в который вы вписываете слово, а пользователь видит его внутри. Некое подобие подсказки или названия для каждого поля формы.</p><p>Каждый браузер обрабатывает этот тег по своему, и стили его оформления оставляют желать лучшего. Чтобы изменить стили по умолчанию, достаточно добавить пару строк кода в файл стилей. Сложного ничего нет.<br> Правда необходимо учитывать, что не все мы сможем поменять.</p><h2>Среди всего многообразия стилей, в данном случае нам доступны следующие вещи:</h2><ul><li>font-weight — установка жирности текста</li><li>font-size — выбор размера текста</li><li>font-family — выбор шрифта</li><li>background — фон и фоновое изображение</li><li>color — цвет текста</li><li>word-spacing — установка интервала между словами</li><li>letter-spacing — установка интервала между буквами</li><li>text-decoration — выбор украшения слов. Подчеркнутый, зачеркнутый и тд</li><li>vertical-align — установка вертикального выравнивания</li><li>text-transform — выбор изменения текста. Все заглавными или строчными буквами и тд</li><li>line-height — интервал между строками</li><li>text-indent — устанавливает отступ по левому краю у первой строки параграфа</li><li>text-overflow — выбор отображения текста, который не умещается в блоке (скрыть или обрезать и добавить многоточие)</li><li>opacity — выбор прозрачности элемента</li> </ul><p>Теперь, когда мы разобрались в доступных стилях, можно приступить к оформлению, для этого добавим следующие стили:</p><p>::-webkit-input-placeholder { color: #2cb04d; }<br> ::-moz-placeholder { color: #2cb04d; }/* Firefox 19+ */<br> :-moz-placeholder { color: #2cb04d; } /*Firefox 18- */<br> :-ms-input-placeholder { color: #2cb04d; }</p><p>После добавления этих строк, изменится цвет названий внутри полей формы и в каждом браузере он будет одинаковый. Тут же можно дописать дополнительные стили.<br> К примеру вот такой стиль</p><p>::-webkit-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}<br> ::-moz-placeholder {color:#2cb04d; font-size:1.5em; font-weight:600;} /*Firefox 19+*/<br> :-moz-placeholder {color:#2cb04d; font-size:1.5em; font-weight:600;} /*Firefox 18-*/<br> :-ms-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}</p><p>Добавит цвет, большой размер и среднюю жирность текста. Если добавить дополнительное свойство —<br> text-overflow:ellipsis то текст будет обрезаться по размеру поля, в конце будет добавлено многоточие.</p><p>Есть еще одно интересное свойство, благодаря появлению анимации в css (стилях) можно настроить красивое скрытие при установке курсора в поле. Раньше это делалось черз js (скрипты)</p><p>Input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}<br> .input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}<br> .input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}<br> .input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}<br> .input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}<br> .input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}<br> .input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}<br> .input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}</p><p>Добавление таких стилей позволит сделать плавное исчезновение placeholder-a при установки курсора в поле<br> .input — это класс элемента формы. Для того чтобы стили сработали, код поля формы должен выглядить так:</p><p><input type="text" class="input" placeholder="имя поля"></p><p>Или можно использовать класс элемента. Таким образом можно задавать разные стили для каждой формы.</p><p><!-- первым указываем класс контейнера, тег формы и тег вставки поля --><br> .contacts-form form input::-webkit-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}<br> .contacts-form form input::-moz-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}/*Firefox 19+*/<br> .contacts-form form input:-moz-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}/*Firefox 18-*/<br> .contacts-form form input:-ms-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}</p><p>Вот такими нехитрыми способами можно сделать действительно красивое оформление формы.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">Лучшие статьи по теме</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="/skachat-obnovlenie-itunes-na-kompyuter-skachat-programmu-pc-suite.html"> <div class="img_container"><img src="/uploads/6bd3607d896bd31f4b5914419b3f9532.jpg" border="0" alt="Скачать программу pc suite" width="320" height="180" / loading=lazy></div> <span class="theme-post-link">Скачать программу pc suite</span> </a> </div> <div class="theme-post col-sm-4"> <a href="/otklyuchit-zapusk-programm-pri-vklyuchenii-kompyutera-kak-otklyuchit.html"> <div class="img_container"><img src="/uploads/5a1a6d286228a547039ce709e81a133e.jpg" border="0" alt="Как отключить автозапуск программ?" width="320" height="180" / loading=lazy></div> <span class="theme-post-link">Как отключить автозапуск программ?</span> </a> </div> <div class="theme-post col-sm-4"> <a href="/kak-vklyuchit-sluzhbu-obnovleniya-windows-10-kak-naiti-otklyuchit-centr-obnovlenii.html"> <div class="img_container"><img src="/uploads/814eaf4e1d4f2f9b8b451a8b322554a7.jpg" border="0" alt="Как найти, отключить Центр обновлений Windows и исправить проблемы в его работе" width="320" height="180" / loading=lazy></div> <span class="theme-post-link">Как найти, отключить Центр обновлений Windows и исправить проблемы в его работе</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">Категории:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="/category/programs/">Программы</a></li> <li class=""><a href="/category/safety/">Безопасность</a></li> <li class=""><a href="/category/windows-10/">Windows 10</a></li> <li class=""><a href="/category/iron/">Железо</a></li> <li class=""><a href="/category/windows-8/">Windows 8</a></li> <li class=""><a href="/category/vkontakte/">Вконтакте</a></li> <li class=""><a href="/category/errors/">Ошибки</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="https://vk.com/share.php?url=https://bumotors.ru/vneshnii-vid-nazvaniya-polei-ili-kak-izmenit-placeholder-dobavlyaem-css-stil.html" class="vk social-ico"></a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/vneshnii-vid-nazvaniya-polei-ili-kak-izmenit-placeholder-dobavlyaem-css-stil.html" class="fb social-ico"></a> <a href="https://www.twitter.com/share?url=https://bumotors.ru/vneshnii-vid-nazvaniya-polei-ili-kak-izmenit-placeholder-dobavlyaem-css-stil.html" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12"> © 2024 bumotors.ru. Как настроить смартфоны и ПК. Информационный портал. </span> </div> </div> </div> </div> </body> </html>