wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Css input placeholder: html — Change an HTML5 input’s placeholder color with CSS

alexxlab
No Comments

Содержание

::placeholder — Веб-технологии для разработчиков

CSS псевдоэлемент ::placeholder представляет собой текст placeholder в <input> или <textarea> элементах.

::placeholder {
  color: blue;
  font-size: 1.5em;
}

В ::placeholder можно использовать только те CSS свойства, которые разрешены в псевдоэлементе ::first-line.

Note: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светлосерый текст.

Синтаксис

::placeholder

Примеры

Красный текст

HTML
<input placeholder="Введите что-нибудь!">
CSS
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}
Результат

Зелёный текст

HTML
<input placeholder="Введите что-нибудь...">
CSS
input::placeholder {
  color: green;
}
Результат

Проблемы доступности

Цветовой контраст

Контрастность

Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

Использование

Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в <input> элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.

Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby для программного связывания <input> элемента с подсказкой.

В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют aria-describedby для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.

<label for="user-email">Ваш email адрес</label>
<span>Пример: [email protected]</span>
<input aria-describedby="user-email-hint" name="email" type="email">

Режим высокой контрастности Windows

Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.

Метки

Placeholder не является заменой элемента <label>. Без метки, которая программно связывается с формой с помощью for и id аттрибутов, такие программы, как скринридеры не смогут анализировать элементы <input>.

Спецификации

Совместимость с браузерами

Update compatibility data on GitHub

КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
::placeholderChrome
Полная поддержка

57


Полная поддержка

57

Полная поддержка

6
С префиксом Требует вендорный префикс: -webkit-input-
Edge
Полная поддержка

12


Полная поддержка

12
С префиксом Требует вендорный префикс: -webkit-input-

Полная поддержка

12
С префиксом Требует вендорный префикс: -ms-input-
Firefox
Полная поддержка

51


Полная поддержка

51

Полная поддержка

19
С префиксом Требует вендорный префикс: -moz-
IE
Нет поддержки

Нет		Opera
Полная поддержка

44


Полная поддержка

44

Полная поддержка

15
С префиксом Требует вендорный префикс: -webkit-input-
Safari
Полная поддержка

10.1


Полная поддержка

10.1

Полная поддержка

5
С префиксом Требует вендорный префикс: -webkit-input-
WebView Android
Полная поддержка

57


Полная поддержка

57

Полная поддержка

2
С префиксом Требует вендорный префикс: -webkit-input-
Chrome Android
Полная поддержка

57


Полная поддержка

57

Полная поддержка

18
С префиксом Требует вендорный префикс: -webkit-input-
Firefox Android
Полная поддержка

51


Полная поддержка

51

Полная поддержка

19
С префиксом Требует вендорный префикс: -moz-
Opera Android
Полная поддержка

43


Полная поддержка

43

Полная поддержка

14
С префиксом Требует вендорный префикс: -webkit-input-
Safari iOS
Полная поддержка

10.3


Полная поддержка

10.3

Полная поддержка

4.3
С префиксом Требует вендорный префикс: -webkit-input-
Samsung Internet Android
Полная поддержка

7.0


Полная поддержка

7.0

Полная поддержка

1.0
С префиксом Требует вендорный префикс: -webkit-input-

Легенда


Полная поддержка
 
Полная поддержка

Нет поддержки
 
Нет поддержки
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также

Псевдокласс ::-webkit-input-placeholder | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
11.0+5.1+

Краткая информация

Значение по умолчаниюНет.
НаследуетсяДа
ПрименяетсяК <input>, <textarea>
Процентная записьНеприменима

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

input::-webkit-input-placeholder {...}
textarea::-webkit-input-placeholder {...}

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <title>::-webkit-input-placeholder</title>
  <style>
   body { background: #053f38; }
   input[type="search"] { 
    border: 1px solid #98baba; /* Параметры рамки */
    background: transparent; /* Прозрачный фон */
    padding: 1px 4px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
   }
   input[type="search"]::-webkit-input-placeholder {
    color: #ffd595; /* Цвет подсказывающего текста */
   }
  </style>
 </head>
 <body>
  <form>
   <p><input type="search" placeholder="Поиск по сайту" name="q">
   <input type="submit" value="Найти"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Использование псевдокласса ::-webkit-input-placeholder

Браузеры

Firefox поддерживают псевдокласс ::-moz-placeholder.

Css placeholder color или как изменить цвет placeholder css

Доброго времени, коллеги! Бывало ли у вас такое, что заказчик говорит что плохо виден текст в полях для заполнения формы? Более того, кто ведет свои блоги, знает, что цвет текста в input в комментариях всегда какой-то нечитаемый, блеклый, а браузер Mozilla и вовсе его «размазывает».

Css placeholder color

И поэтому сегодня, мы рассмотрим такой вопрос как изменить цвет placeholder при помощи css. Как по мне, решение внизу лучшее так как оно более валидно и не требует особых знаний в css, к тому же, добавить свой color к placeholder сможет каждый.

HTML: стандартная конструкция

<form>
   <input type="text" placeholder="Ваше имя">
   <input type="text" placeholder="Ваш телефон">
   <input type="submit" value="Отправить заявку">
</form>

Префиксы

Для всех современных браузеров достаточно использовать такую конструкцию.

.in-put::placeholder {color: #000000;}

Но если делаете проект на заказ, то рекомендую добавить еще несколько строк. Важно: не объединяйте эти стили вместе с вашими, уже существующими, а прописывайте так как они есть в примере ниже.

/* Современные браузеры
   ----------------------------  */
.in-put::placeholder {color: #000000;}

/* WebKit, Edge
   ----------------------------  */
.in-put::-webkit-input-placeholder {color: #000000;}

/* Edge
   ----------------------------  */
.in-put::-ms-input-placeholder {color: #000000;}

/* Firefox 4-18
   ----------------------------  */
.in-put:-moz-placeholder {color: #000000;opacity: 1;}

/* Firefox 19+
   ----------------------------  */
.in-put::-moz-placeholder {color: #000000;opacity: 1;}

/* IE 10-11
   ----------------------------  */
.in-put:-ms-input-placeholder {color: #000000;}

Зачем столько кода, спросите вы! Много не мало! А если кроме шуток, то на данный момент этого еще нет в стандартах, и поэтому, в каждом браузере поддержка стилизации placeholder реализована по-своему.

Читайте также:

Трюк: изменение прозрачности

Вообще, существует несколько фишек по стилизации и «анимации» placeholder’а, но если есть необходимость чтобы проект прошел проверку на валидность, то не стоит такими фишками баловаться.

/* Изменение прозрачности при фокусе
   ----------------------------  */
.in-put:focus::placeholder {opacity: 0;transition: opacity 0.3s ease;}

Плагин

А если уж совсем хочется или возможно требуется в разработке проекта, то обратите внимание на плагин по ссылке ниже. Он добавляет к полю лишь label имитируя плейсхолдер, который однозначно можно кастомизировать как душе угодно. Больше того, это даже будет работать в сафари, черт его побери…

Документация и демо

www.jqueryscript.net/form/Create-Animated-Placeholders-with-jQuery-CSS-placeholder-js.html

Пример на Codepen

codepen.io/CmsWp/pen/zYxKNLm

На сегодня сеанс окончен, до встречи в следующей статье! Не делайте гуано-сайтов, не надо!

Стилизация placeholder в CSS — Блог о веб-разработке

Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с исчезающим текстом в поле ввода формы с помощью javascript, положительная сторона данного метода это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в элементах input и textarea.
Код поля ввода в нашем примере будет выглядеть примерно так:


<input type="text" placeholder="Введите ваше имя">

На выходе мы получает такое поле:

Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:


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

Получаем:

Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:
• font (так же смежные свойства)
• background (так же смежные свойства)
• color
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• text-overflow
• opacity

В разных браузерах правило пишется по разному, т.к. пока нет единого стандарта, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых браузерах firefox, webkit и blink воспринимается как псевдоэлемент.
 
Сокращение текста в placeholder
Иногда подсказки могут быть такой длины, что не способны полностью поместиться в поле ввода. Для этих целей можно так же воспользоваться дополнительными свойствами, которые позволят сократить текст placeholder-а в поле ввода.


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

В результате получаем поле ввода такого с placeholder такого вида:
 
Скрываем текст при клике по полю
По умолчанию каждый браузер интерпретирует реакцию placeholder-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.


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

Получаем такое действо:

Псевдокласс :placeholder-shown | CSS | WebReference

Определяет стиль элемента <input> или <textarea>, который в данный момент отображает текст подсказки, заданной атрибутом placeholder. Такая подсказка обычно исчезает при наборе текста.

Синтаксис 

input:placeholder { ... }
textarea:placeholder-shown { ... }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
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-shown</title>
<style>
input {
border: 1px solid green; /* Зелёная рамка */
}
input:placeholder-shown {
border-color: red; /* Красная рамка */
}
</style>
</head>
<body>
<form action=»/example/handler.php»>
<input type=»text» name=»login» placeholder=»Логин»>
<input type=»password» name=»pass» placeholder=»Пароль»>
</form>
</body>
</html>

В данном примере пустое поле отображается с красной рамкой, при вводе текста рамка меняет цвет на зелёный.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 31.05.2018

Редакторы: Влад Мержевич

Атрибут placeholder тега | HTML справочник

HTML тег <input>

Значение и применение

Атрибут placeholder (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.

Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера.

Атрибут может быть использован с полями данных следующих типов (атрибут type):

  • email (поле для адреса электронной почты).
  • password (поле с паролем, в котором скрываются символы).
  • search (текстовое поле для ввода строки поиска).
  • text (однострочное текстовое поле).
  • tel (поле для ввода номера телефона).
  • url (поле для ввода URL-адреса).

Поддержка браузерами

Синтаксис:

<input placeholder =  "text">

Значения атрибута

ЗначениеОписание
textТекстовая подсказка, которая описывает ожидаемое значение для ввода в элемент. Запрещается использование символов возврата каретки и перевода строки.

Отличия HTML 4.01 от HTML 5

Атрибут считается новым в HTML 5.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута placeholder</title>
</head>
<body>
	<form>
		Login: <input type = "text"  name = "login" placeholder = "Введите ваш логин"><br><br>
		Password: <input type = "password"  name = "password" placeholder = "Введите ваш пароль"><br>
		<button type = "submit">Далее</button>
	</form>
</body>
</html>

В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Пример использования атрибута placeholder HTML тега <input> (создание текстовой подсказки).HTML тег <input>

Стилизация placeholder на чистом CSS

24 февраля 2018 15:04:00

5356 просмотров

Автор: Николай Ковалёв


Атрибут placeholder используется в полях форм и представляет собой некую подсказку для пользователей. Иногда приходится стилизовать эту подсказку под дизайн сайта, поэтому в этой статье мы рассмотрим самый простой и самый удобный способ стилизации placeholder с использованием только CSS.


Вот пример, как используется атрибут с тегами input и textarea: 

<input type="text" placeholder="Введите текст">
<textarea cols="30" rows="5" placeholder="Введите текст"></textarea>


Чтобы стилизовать placeholder, воспользуемся такими CSS правилами: 

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


Сейчас мы изменили только цвет текста, но так же можно изменить следующие свойства:

  • background


  • opacity


  • text-decoration


  • text-transform


  • padding


  • line-height


  • letter-spacing


  • word-spacing


  • font-weight


  • font-style


  • font-size


  • text-overflow


  • text-indent


  • vertical-align

Как скрыть placeholder при клике по полю


Чтобы при клике по полю placeholder скрывался, используйте следующие правила: 

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

:: заполнитель — Веб-технологии для разработчиков

CSS псевдоэлемент :: placeholder представляет собой текстовый заполнитель в или

2024 © Все права защищены. Карта сайта