wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Css placeholder select: html — How do I make a placeholder for a ‘select’ box?

alexxlab
No Comments

Содержание

Стилизация HTML5 плейсхолдера с помощью CSS / Хабр

В HTML5 есть замечательный атрибут — placeholder (текст-подсказка для элементов ввода). Задается он следующим образом:

<input type=«text» placeholder=«type here some text» />

Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS.

Пока это можно сделать только в Google Chrome, Safari и Firefox, так как в Opera пока еще нет возможность задавать для него стили, а IE не поддерживает его вовсе.

CSS правила для webkit и mozilla:

input::-webkit-input-placeholder {}

input:-moz-placeholder {}

Только имейте ввиду, что нельзя совмещать эти селекторы в один, и если вы напишете:

input:-moz-placeholder,

input::-webkit-input-placeholder { }

то CSS правила не будут работать. И обратите внимание, что для webkit надо писать два двоеточия, а для mozilla — одно.

Еще несколько примеров:

/* стили для webkit */

#field2::-webkit-input-placeholder { color:#00f; }

#field3::-webkit-input-placeholder {

color:#090;

background:lightgreen;

text-transform:uppercase;

}

#field4::-webkit-input-placeholder {

font-style:italic;

text-decoration:overline;

letter-spacing:3px; color:#999;

}

/* стили для mozilla */

#field2:-moz-placeholder { color:#00f; }

#field3:-moz-placeholder {

color:#090; background:lightgreen;

text-transform:uppercase;

}

#field4:-moz-placeholder {

font-style:italic;

text-decoration:overline;

letter-spacing:3px;

color:#999;

}

Также следует заметить, что разные браузеры по разному поддерживают стили для плейсхолдера. Например в Firefox вы можете задать для него цвет фона, а в Chrome нет.

Список поддерживаемых CSS стилей для атрибута placeholder:














Chrome 10(Win 7)Chrome 11 (Win 7)Firefox 4(Win 7)Safari 3.1(Win XP & OS X)Safari 5(Win 7 & OS X)Opera 11(Win 7)
background-colorнетнет+нет+нет
borderнетнет+нет+нет
color+++нет+нет
font-size+++нет+нет
font-style+++нет+нет
font-weight+++нет+нет
letter-spacing+++нет+нет
line-heightнетнетнетнетнетнет
padding top/bottomнетнет+нет+нет
padding left/rightнетнет+нетнетнет
text-decorationнетнет+нет+нет
text-transformнетнет+нет+нет

Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

html
<input type="text" placeholder="Оставьте сообщение здесь">

input placeholder demo

Стиль placeholder-a можно изменить с помощью такого набора css правил:

css
::-webkit-input-placeholder {color:#c0392b;}
::-moz-placeholder          {color:#c0392b;}/* Firefox 19+ */
:-moz-placeholder           {color:#c0392b;}/* Firefox 18- */
:-ms-input-placeholder      {color:#c0392b;}

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.

В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.

Смотрим, что получилось:

input placeholder demo

Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:

  • font (и сопутствующие свойства)
  • background (и сопутствующие свойства)
  • color
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • text-overflow
  • opacity

А если placeholder не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis. Такой синтаксис будет работать во всех новых браузерах.

css
input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-moz-placeholder      {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;}

input placeholder demo

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

  1. в некоторых браузерах при получении фокуса инпутом
  2. в других браузерах при наличии хотя бы одного введенного символа

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:

css
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

input placeholder demo

Скрываем placeholder красиво

Можно также добавить transition для появления и скрытия placeholder-a:

input placeholder demo

Вот сss:

css
/* плавное изменение прозрачности  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;}

Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

Стилизуем Placeholder с помощью CSS 

Используйте псевдоэлемент ::placeholder для стилизации дефолтного текста в элементе input или textarea. Большинство современных браузеров поддерживают это, но для старых браузеров требуются префиксы.

::placeholder { 
 color: deeppink;
 font-size: 5rem;
 text-transform: uppercase;
}

HTML

Префиксы
Используемый мной синтаксис поддерживается большинством современных браузеров:
::placeholder { 
 color: deeppink;
}
Но для более старых браузеров вам нужно будет использовать префиксы поставщика.
/* WebKit, Edge */
::-webkit-input-placeholder {
 color: deeppink;
}

/* Firefox 4-18 */
:-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* IE 10-11 */
:-ms-input-placeholder { 
 color: deeppink;
}

/* Edge */
::-ms-input-placeholder { 
 color: deeppink;
}

/* MODERN BROWSER */
::placeholder { 
 color: deeppink;
}
Вау! Я знаю, это огромный список. И вы можете заметить довольно много разных вариантов реализации. Итак, давайте разберем эти различия и поймем, что здесь происходит.
Псевдоэлемент против псевдокласса
Вы можете заметить, что я использую двойное двоеточие ::. Это называется псевдоэлементом и было введено в CSS3. Если бы мы использовали одно двоеточие :, это назвали бы псевдоклассом.
Поскольку псевдоэлемент, :: был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. Принимая во внимание, что псевдокласс, : был представлен ранее (в CSS1 и CSS2). Вот почему гораздо больше браузеров, включая Internet Explorer, поддерживают его.
Следовательно, в нашем ::placeholder префиксе поставщика вы будете использовать смесь псевдокласса и псевдоэлемента.
Непрозрачность Placeholder в Firefox по умолчанию
Хорошо, с чем это связано opacity: 1 для Firefox. Это потому, что по умолчанию для placeholder Firefox применяется значение непрозрачности. Таким образом, чтобы переопределить это, мы должны установить его принудительно. Таким образом, наш placeholder будет отображаться и не будет иметь блеклого внешнего вида по умолчанию.
CSS-обработка неверных селекторов
Таким образом, вы также можете подумать, почему мы не просто сгруппировали все префиксы вендоров вместе как в примере ниже:
::-moz-placeholder, /* Firefox 19+ */
:-moz-placeholder /* Firefox 4-18 */
{ 
 color: deeppink;
 opacity: 1;
}
Ну, это потому, что в CSS3 было правило, которое гласит:
группа селекторов, содержащая недопустимый селектор, недействительна.
Давайте посмотрим на пример, чтобы увидеть, что это значит. Вот правильный CSS-селектор
h2 {
 color: blue;
}
Так что в нашем HTML это будет выглядеть как ожидалось
 

Но что произойдет, если мы добавим неверный селектор CSS
h2, /* valid */
h3::poop /* invalid */
{
 color: blue;
}
Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стилизация не будет применена.
 

Вот почему нам нужны отдельные правила для каждого браузера. В противном случае вся группа будет игнорироваться всеми браузерами.
⭐️ НО! похоже, это можно изменить в CSS4.
Как правило, если в цепочке или группе селекторов присутствует недопустимый псевдоэлемент или псевдокласс, весь список селекторов является недействительным. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, то по состоянию на Firefox 63 браузеры Blink, Webkit и Gecko предполагают, что он действителен, не аннулирует список выбора.
Подробнее об этом читайте в статье Криса Койера «Один неверный псевдо-селектор равен целому игнорируемому селектору»
Поддерживаемые стили
Вот список всех стилей, которые вы можете применить к вашему placeholder:
  • background свойства
  • color
  • font свойства
  • letter-spacing
  • line-height
  • opacity
  • text-decoration
  • text-indent
  • text-transform
  • vertical-align
  • word-spacing
Проблемы доступности
Способность стилизовать заполнители — это круто. Но мне нужно отметить кое-что действительно важное — текст-заполнитель не заменяет элемент метки !! Я был виновен в этом, когда впервые попал в веб-программирование 🙁. Когда ваша форма основана исключительно на инструкциях-заполнителях без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для повышения удобства работы пользователей. И, в конечном итоге, создание лучшего сайта или веб-приложения.
Вот действительно потрясающая статья о том, как использовать заполнители без каких-либо меток. Ниже приведены три основных тезиса:
  1. Поскольку placeholder исчезает в при вводе, он может напрягать кратковременную память вашего пользователя
  2. Без label пользователи не могут проверить свою работу перед отправкой формы.
  3. Когда появляются сообщения об ошибках, люди не знают, как решить проблему.
Автоматически добавлять Vendor-префиксы
Если вы не хотите иметь дело со всеми префиксами вендоров, вы можете использовать PostCSS с плагином Autoprefixer . Этот плагин будет анализировать ваш CSS и добавлять префиксы.
Псевдоэлемент ::placeholder | CSS | WebReference
Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.
Синтаксис 
Селектор::placeholder { ... }
Обозначения
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
Пример
<!DOCTYPE html>
 <html>
 <head>
 <meta charset=»utf-8″>
 <title>placeholder</title>
 <style>
 body { background: #053f38; }
 input[type=»search»] {
 border: 1px solid #98baba; /* Параметры рамки */
 background: transparent; /* Прозрачный фон */
 padding: 1px 4px; /* Поля вокруг текста */
 color: #fff; /* Цвет текста */
 }
 input[type=»search»]::-moz-placeholder {
 color: #ffd595; /* Цвет подсказывающего текста */
 }
 input[type=»search»]::-webkit-input-placeholder { color: #ffd595; }
 input[type=»search»]:-ms-input-placeholder { color: #ffd595; }
 input[type=»search»]::-ms-input-placeholder { color: #ffd595; }
 input[type=»search»]::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>
Результат примера показан на рис. 1.
Рис. 1. Использование ::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.
Браузеры
В таблице браузеров применяются следующие обозначения.
  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
 Автор: Влад Мержевич
 Последнее изменение: 30.08.2017
 Редакторы: Влад Мержевич
Атрибут ::placeholder | CSS
Псевдоэлемент ::placeholder color (в некоторых случаях псевдокласс) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder: <input type=»email» placeholder=»[email protected]»>.
Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.
Как и в случае с любым псевдоэлементом, его вы можно применять к определенным элементам следующим образом:
input[type="email"].big-dog::-webkit-input-placeholder {
  color: orange;
}
Посмотреть пример
:placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.
Взгляните на диаграмму:
Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown, но отсутствует ::placeholder.
Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом (например, можно изменять font-size).
Обратите внимание: :placeholder-shown – псевдокласс (элемент в конкретном состоянии), а ::placeholder – это псевдоэлемент (видимая часть, которая находится не в DOM). Отличаются они одинарными и дойными кавычками.
Так как :placeholder-shown является псевдоклассом, то он должен выделять существующий элемент. И поэтому выделяет форму ввода, когда текст в элементе формы отображается. Псевдоэлемент ::placeholder оборачивает сам текст заглушки.
В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.
Изначально этот псевдокласс был внедрён в браузер Firefox. Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder. А псевдокласс не позволяет этого сделать.
IE10 поддерживает этот функционал в качестве псевдокласса, а не элемента. Во всех остальных браузерах он расценивается как псевдоэлемент.
Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43, а справа — Chrome 47:
Так происходит потому, что по умолчанию все «заглушки» в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:
::-moz-placeholder {
  opacity: 1;
}
Попробуйте открыть это демо в браузере Firefox.
Псевдоэлемент поддерживает следующие свойства:
  • font properties;
  • color;
  • background properties;
  • word-spacing;
  • letter-spacing;
  • text-decoration;
  • vertical-align;
  • text-transform;
  • line-height;
  • text-indent;
  • opacity;
Документация MDN
Документация IE
Развёрнутая статья на блоге Treehouse
Здесь имеется в виду как нативная поддержка CSS input placeholder color, так и поддержка, реализуемая с помощью префиксов.
ChromeSafariFirefoxOperaIEAndroidiOS
4+5+4+15+10+ЛюбойЛюбой
Firefox поддерживает псевдоклассы до 18 версии. Версии 19+ поддерживают псевдоэлемент, но не класс.
 
Данная публикация представляет собой перевод статьи «::placeholder» , подготовленной дружной командой проекта Интернет-технологии.ру
  телеграм канал. Подпишись, будет полезно!
Атрибут placeholder | htmlbook.ru
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.0+8.0+11.50+5.0+4.0+3.0+3.0+
Спецификация 
HTML:3.24.015.0XHTML:1.01.1
Описание
Выводит текст внутри текстового поля, который исчезает при получении фокуса.
 Синтаксис
<textarea placeholder="строка">
</textarea>
Значения
Текстовая строка. Если внутри строки предполагается пробел, ее необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Пример
HTML5IE 10CrOpSaFx
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег textarea, атрибут placeholder</title>
 </head>
 <body>
   <form action="handler.php">
     <p><textarea placeholder="Ваше сообщение"></textarea></p>
     <p><input type="submit" value="Отправить"></p>
   </form>
 </body>
</html>
Результат данного примера в браузере Chrome показан на рис. 1.
Рис. 1. Вид текста, созданного с помощью атрибута placeholder
Firefox 4 допускает изменять стиль текста, выводимого через атрибут placeholder, с помощью псевдокласса :-moz-placeholder.
textarea:-moz-placeholder { color: red; }
 В Safari и Chrome стиль текста меняется следующим образом:
 textarea::-webkit-input-placeholder { color: red; }
Псевдокласс ::-moz-placeholder | htmlbook.ru
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+
Краткая информация 
Значение по умолчаниюНет.
НаследуетсяДа
ПрименяетсяК <input>, <textarea>
Процентная записьНеприменима
Версии CSS
CSS 1CSS 2CSS 2.1CSS 3
Описание
Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста созданного атрибутом placeholder. Совместно с ::-moz-placeholder допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.
Синтаксис
input::-moz-placeholder {...}
textarea::-moz-placeholder {...}  
Значения
Нет.
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <title>-moz-placeholder</title>
  <style>
   body { background: #053f38; }
   input[type="search"] { 
    border: 1px solid #98baba; /* Параметры рамки */
    background: transparent; /* Прозрачный фон */
    padding: 1px 4px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
   }
   input[type="search"]::-moz-placeholder {
    color: #ffd595; /* Цвет подсказывающего текста */
   }
  </style>
 </head>
 <body>
  <form>
   <p><input type="search" placeholder="Поиск по сайту" name="q">
   <input type="submit" value="Найти"></p>
  </form>
 </body>
</html>
Результат примера показан на рис. 1.
Рис. 1. Использование псевдокласса ::-moz-placeholder
Браузеры
Firefox до версии 19.0 поддерживает запись с одним двоеточием :-moz-placeholder
Safari и Chrome поддерживают псевдокласс ::-webkit-input-placeholder.
 html — наличие заполнителя в опции выбора 
 Переполнение стека
  1.  Около
  2.  Продукты
  3.  Для команд
  1.  Переполнение стека
     Общественные вопросы и ответы
  2.  Переполнение стека для команд
     Где разработчики и технологи делятся частными знаниями с коллегами
  3.  Вакансии
     Программирование и связанные с ним технические возможности карьерного роста
  4.  Талант
     Нанимайте технических специалистов и создавайте свой бренд работодателя
  5.  Реклама
     Обратитесь к разработчикам и технологам со всего мира
  6.  О компании
 .
 :: placeholder — Веб-технологии для разработчиков 
 Псевдоэлемент CSS   :: placeholder   представляет текст заполнителя в элементе    или 
 
 
  
 2024 © Все права защищены. Карта сайта