Как обратиться к placeholder css
Перейти к содержимому

Как обратиться к placeholder css

  • автор:

Как менять цвет placeholder-a через javascript?

Всем привет! У меня есть инпут, как я могу поменять цвет placeholder-a при на фокусе на input? Сделать примерно как при входе ВКонтакте. То есть, если есть наведение на инпут, placeholder становится более прозрачным, ну или цвет более можно сделать ярким.

Узнал что можно вот так прописать в стилях:

.login::placeholder

Но тут у меня проблемы: Я всегда решал задачки через classList.add, заранее прописывая класс со стилями в файле style.css, где хранились все мои стили. Добвавлялось все просто, типо add(‘active’) и т.д. Но сейчас возникла проблема, не знаю как работать в javascript-e c псевдо-классами. Есть ли какое-то решение? Кто сталкивался?

Оформить placeholder

Оформить placeholder можно через свойство ::placeholder .

/* Chrome, Opera */ ::-webkit-input-placeholder < color: green; > /* Firefox */ ::-moz-placeholder < color: green; > /* IE 10 и выше */ :-ms-input-placeholder < color: green; >

Стоит обратить внимание, что нельзя объединять эти селекторы.

/* Код работать не будет, т.к. селекторы объединены */ ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder < color: green; >

2-ой способ: убирать текст

Когда выбирается текстовое поле, то «placeholder» остаётся на месте, пока не начинается заполняться текстовое поле. Чтобы убирать «placeholder», можно применить следующий CSS-код:

::-webkit-input-placeholder < opacity: 1; transition: opacity 0.3s ease; > ::-moz-placeholder < opacity: 1; transition: opacity 0.3s ease; > :-ms-input-placeholder < opacity: 1; transition: opacity 0.3s ease; > :focus::-webkit-input-placeholder < opacity: 0; > :focus::-moz-placeholder < opacity: 0; > :focus:-ms-input-placeholder < opacity: 0; >

Параметр transition делает плавным исчезновение «placeholder» (если браузер поддерживает это свойство).

Обновлено: 01 ноября 2020

Комментарии

Авторизуйтесь, чтобы добавлять комментарии

Как валидировать форму на чистом css при помощи псевдоклассов invalid и placeholder-shown?

Прочитал в статье, что можно валидировать форму на чистом CSS используя сочетание псевдоклассов :placeholder-shown и :invalid и свойства :not . Пробую воспроизвести это в форме ниже, но не получается добиться результата. Валидацию в самом примере тоже не получается проверить

.form < display: inline-block; padding: 25px; border: 1px solid #ccc; border-radius: 5px; width: 500px; >.form__field < margin-bottom: 10px; >.validation < color: red; text-align: left; font-size: 12px; display: block; margin-top: 3px; display: none; >.form input < outline: none; display: block; width: 100%; border-radius: 2px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; >.form button < width: 100%; padding: 10px; border-radius: 2px; border: 0; background-color: #ccc; color: #fff; cursor: pointer; >input:valid:not(:placeholder-shown) < border-color: green; >input:invalid:not(:placeholder-shown) < border-color: red; >input:invalid:not(:placeholder-shown)+.validation
 

Отслеживать
задан 1 июл 2021 в 13:41
4,480 6 6 золотых знаков 40 40 серебряных знаков 95 95 бронзовых знаков

required=»» �� required (это булевый атрибут). И что собственно не устраивает, в чем суть проблемы? Раскрой фразы «не получается добиться результата» и «не получается проверить», допиши в вопрос подробности о затруднениях с которыми столкнулся.

1 июл 2021 в 14:18
@yar85 это поправил, но на результат не повлияло
1 июл 2021 в 14:24

Результат сейчас соответствует тому что написано, поэтому и нужны подробности в вопросе 🙂 Если ты про красную обводку — то ее быть не должно, ибо в селекторе условие непоказа плейсхолдера и условие невалидности (в данном случае, невалидным поле может быть только если пустое) взаимоисключают друг друга. Такой селектор может работать разве что с заполненным атрибутом pattern , но в верстке он отсутствует. Если же хочешь видеть красную обводку у пустых полей, то убери из селектора c :invalid условие «непоказа» плейсхолдера :not(:placeholder-shown) .

1 июл 2021 в 14:29

@yar85 в моём случае обводка не используется. Я хочу добиться того, чтобы при попытке отправки пустого поля всплывало красная надпись ` `

1 июл 2021 в 14:41

У правила показа .validation проблема та же самая, о которой я написал комментарием выше: взаимоисключающие условия в селекторе. В данном случае, поле ввода невалидно тогда и только тогда, когда оно пусто. А когда поле ввода пусто, показывается плейсхолдер. В селекторе фактически написано условие «невалидно (пусто) И без плейсхолдера (не пусто)» => это условие, которое никогда не выполнится.

Псевдоклассы, псевдоэлементы

Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.

Необходимые условия: Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель: Узнать о селекторах псевдокласса и псевдоэлемента.

Что такое псевдокласс?

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

Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:

:pseudo-class-name

Простой пример псевдокласса

Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:

Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса :first-child — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)

Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:

Примечание: Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать :first-child и правило было бы применено к любому элементу, оказавшемуся первым дочерним для , не только к первому дочернему абзацу — :first-child равнозначно *:first-child . Однако обычно вы хотите большего контроля, поэтому вам нужен более специфичный селектор.

Псевдоклассы пользовательского действия

Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:

  • :hover — упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.
  • :focus — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.

Что такое псевдоэлемент?

Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия :: .

::pseudo-element-name

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

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

Селектор псевдоэлемента ::first-line сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.

Он действует так, как если бы волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.

Вы можете видеть, что селектор выбирает первую строку обоих абзацев.

Объединение псевдоклассов и псевдоэлементов

Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line . Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента

, который находится внутри элемента .

article p:first-child::first-line  font-size: 120%; font-weight: bold; > 

Генерация контента с помощью ::before и ::after

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

Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства content и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.

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

Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:

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

В следующем примере мы добавили пустую строку, используя псевдоэлемент ::before. Мы установили display: block , чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.

Использование псевдоэлементов ::before и ::after вместе со свойством content в CSS называется «генерируемым контентом» в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов ::before и ::after . Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство content , чтобы увидеть, что добавляется в документ..

Справочный раздел

Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.

Псевдоклассы

Селектор Описание
:active Подходит, когда пользователь активирует (например, щёлкает мышью) элемент.
:any-link Соответствует как состоянию :link, так и состоянию :visited ссылки.
:blank Соответствует элементу , для которого значение ввода является пустым.
:checked Соответствует переключателю или флажку в выбранном состоянии.
:current (en-US) Соответствует элементу или предку элемента, который в данный момент отображается.
:default Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (обрабатывают нажатие клавиши enter) в наборе сходных элементов.
:dir Выбирает элемент на основе его направленности (значение атрибута HTML dir (en-US) или свойства CSS direction ).
:disabled Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии.
:empty Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.
:enabled Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии.
:first В постраничном носителе соответствует первой странице.
:first-child Соответствует элементу, который является первым среди других дочерних элементов одного предка.
:first-of-type Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка.
:focus Соответствует элементу, имеющему фокус.
:focus-visible Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю.
:focus-within Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус.
:future (en-US) Соответствует элементам после текущего элемента.
:hover Соответствует элементу, на который наведён курсор мыши.
:indeterminate Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно checkboxes (en-US) .
:in-range Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона.
:invalid Соответствует элементу, например , в недопустимом состоянии.
:lang Соответствует элементу, основанному на языке (значение атрибута HTML lang).
:last-child Соответствует элементу, который является последним среди других дочерних элементов одного предка.
:last-of-type Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка.
:left В постраничном носителе соответствует левосторонним страницам.
:link Соответствует непосещавшимся ссылкам.
:local-link (en-US) Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ.
:is() Соответствует любому селектору из полученного списка селекторов.
:not Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору.
:nth-child Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)
:nth-of-type Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы

) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)

:nth-last-child Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)
:nth-last-of-type Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы

), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)

:only-child Соответствует элементу, являющемуся единственным дочерним для своего предка.
:only-of-type Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка.
:optional Соответствует необязательным элементам формы.
:out-of-range Соответствует элементу с диапазоном, когда его значение находится вне диапазона.
:past (en-US) Соответствует элементам перед текущим элементом.
:placeholder-shown Соответствует элементу input, который показывает текст-заполнитель.
:playing (en-US) Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями «воспроизведён» или «приостановлен», когда этот элемент «воспроизводится».
:paused (en-US) Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями «воспроизведён» или «приостановлен», когда этот элемент «приостановлен».
:read-only Соответствует элементу, который не может быть изменён пользователем.
:read-write Соответствует элементу, который может быть изменён пользователем.
:required Соответствует обязательным элементам формы.
:right В постраничном носителе соответствует правосторонним страницам.
:root Соответствует элементу, который является корнем документа.
:scope (en-US) Соответствует любому элементу, который является элементом области видимости.
:valid Соответствует элементу, такому как , в допустимом состоянии.
:target Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment).
:visited Соответствует посещённым ссылкам.

Псевдоэлементы

Селектор Описание
::after Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента.
::before Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента.
::first-letter Соответствует первой букве элемента.
::first-line Соответствует первой строке содержимого порождающего элемента.
::grammar-error Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.
::marker Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число.
::selection Соответствует части документа, которая была выбрана.
::spelling-error (en-US) Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *