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

Компьютеры Мобильные
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
::placeholder Chrome
Полная поддержка

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 Explorer Chrome Opera Safari Firefox Android iOS
11.0+ 5.1+

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

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

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 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 представляет собой текстовый заполнитель в или

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