Как стилизовать placeholder?
Хочу убрать рамку у плэйсхолдера и как-нибудь его украсить, но не могу понять как: Нашёл лишь способ изменить цвет и расположение текста в нём:
.trial__form < display: flex; flex-direction: column; justify-content: space-between; background-color: #ffffff; border-radius: 5px; height: 362px; width: 360px; >.trial__form ::placeholder < color: #b0b0b0; position: relative; left: 15px; top: -5px; font-family: 'Open Sans'; font-size: 14px; >.input__trial
Try Your FREE Trial Today Get Started
Отслеживать
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак
задан 27 окт 2020 в 16:19
Ruslan Hellfire Ruslan Hellfire
9 3 3 бронзовых знака
Ну, рамки, вроде бы, можно убрать с помощью border:none;
27 окт 2020 в 16:27
Только сделайте это к псевдо-классу :active нужных input
27 окт 2020 в 16:29
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Рамка принадлежит не плейсхолдеру, а инпуту. Она появляется при фокусе на поле ввода. Ее можно убрать так:
.input__trial:focus
Отслеживать
ответ дан 27 окт 2020 в 16:35
Tina Dumilina Tina Dumilina
56 2 2 бронзовых знака
спасибо большое, помогло
27 окт 2020 в 19:03
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Цвет замещающего текста
В HTML5 к полям формы добавлен атрибут placeholder , который устанавливает замещающий текст. Такой текст отображается серым цветом и пропадает, когда поле получает фокус. Использование этого атрибута достаточно просто, следует только написать текст, всё остальное браузер берет на себя.
Серый цвет, используемый по умолчанию, выбран удачно, но не всегда вписывается в дизайн страницы, особенно если меняется цвет фона полей формы, как показано в примере 1.
Пример 1. Использование placeholder
HTML5 CSS 2.1 IE Cr Op Sa Fx
placeholder body input[type="search"] Для изменения цвета текста в атрибуте placeholder в Firefox применяется псевдокласс ::-moz-placeholder .
В Safari и Chrome стиль текста меняется следующим образом.
Таким образом, соединяя воедино этот стиль, получим страницу, одинаково работающую в браузерах Firefox, Safari и Chrome (пример 2).
Пример 2. Цвет текста
HTML5 CSS3 IE Cr Op Sa Fx
placeholder body input[type="search"] < padding: 3px; background: #333; color: #053f38; border: 1px solid #ccc; >input[type="search"]::-webkit-input-placeholder < color: #ccc; >input[type="search"]::-moz-placeholder Браузеры «не любят» группировать такой стиль, поэтому мне пришлось для отдельных браузеров повторить конструкцию.
Теперь что касается других браузеров. Internet Explorer вообще не понимает атрибут placeholder и отказывается с ним что-либо делать, а Opera не умеет менять цвет текста через стили. Так что приведённый трюк работает только в Firefox, Safari и Chrome.
Как изменить цвет placeholder.
Как известно, буквально несколько лет назад в браузерах появилась интересная возможность устанавливать для текстовых полей input на веб-страницах какие-то текстовые значение по умолчанию.
Причем, эти текстовые значения автоматически исчезают, когда пользователь начинает вводить в текстовое поле какую-либо информацию.
Такой эффект достигается за счет использования атрибута placeholder. Почитать подробнее об этом атрибуте можно здесь.
Сегодня хочу поделиться техникой, как вы можете менять цвет текста, который создается с помощью этого атрибута.
Чтобы понять, как это делается, посмотрите на следующий пример:
::-webkit-input-placeholder < /* WebKit browsers */ color: red; >:-moz-placeholder < /* Mozilla Firefox 4 to 18 */ color: red; >::-moz-placeholder < /* Mozilla Firefox 19+ */ color: red; >:-ms-input-placeholder < /* Internet Explorer 10+ */ color: red; >
Довольно интересная техника, нашел ее на англоязычном форуме. Надеюсь, что для вас она также как и для меня окажется полезной.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Стилизация плэйсхолдеров
Атрибут placeholder используется для создания подсказок внутри пустых полей ввода (теги и ). В этой статье я рассмотрю способы стилизации плэйсхолдеров, а также, как сделать их более удобными в использовании.
Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:
type="email" placeholder="example@gmail.com">При разработке интерфейсов следует учитывать особенности поведения плэйсхолдеров. Текст плэйсхолдера исчезает, как только начинается ввод. Именно поэтому не стоит использовать их для передачи информации о самом поле ввода (сколько и какие именно символов оно должно содержать). Для данных целей лучше всего использовать тег или параграф с небольшой подсказкой. Подробнее об особенностях использования плэйсхолдеров можно почитать здесь.
Стилизация
Для стилизации плэйсхолдеров используются следующие правила:
::-webkit-input-placeholder color: blue; > ::-moz-placeholder color: blue; > /* Firefox 19+ */ :-moz-placeholder color: blue; > /* Firefox 18- */ :-ms-input-placeholder color: blue; >Выглядит ужасно, не так ли? И на это есть причина — до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse.
Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:
@mixin placeholder &::-webkit-input-placeholder @content; > &:-moz-placeholder @content; > &::-moz-placeholder @content; > &:-ms-input-placeholder @content; > >В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на SassMeister):
// Глобально для каждого поля ввода @include placeholder color: blue; > // Для определённых полей ввода .input @include placeholder color: green; > >Пример
Синий текст для плэйсхолдера (никогда так не делайте):
.blue-text::-webkit-input-placeholder color: #2e8ece; > .blue-text:-moz-placeholder color: #2e8ece; > .blue-text::-moz-placeholder color: #2e8ece; > .blue-text:-ms-input-placeholder color: #2e8ece; >Поддерживаемые свойства
Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот полный список поддерживаемых свойств:
- font и все связанные свойства ( font-size , font-family и т.д.)
- background и все связанные свойства ( background-color , background-image и т.д.)
- opacity
- text-indent
- text-overflow
- color
- text-transform
- line-height
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
Анимации
Идеи анимаций принадлежит блогу html5.by.
Все следующие примеры написаны с использованием препроцессора Sass. К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.
Скорее всего, вы захотите применять анимации к плэйсхолдерам при фокусе на поле ввода. Делается всё это достаточно просто. Достаточно всего несколько раз использовать написанный ранее миксин placeholder :
.input @include placeholder // Стили для нормального состояния > &:focus @include placeholder // Стили после события focus > > >Изменение прозрачности
.input @include placeholder color: #aaa; opacity: 1; transition: opacity 300ms; > &:focus @include placeholder opacity: 0; > > >Сдвиг вправо и влево
Чем больше ширина поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .
.input @include placeholder text-indent: 0px; transition: text-indent 300ms; > &:focus @include placeholder text-indent: 500px; > > >Сдвиг вниз
Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.
.input @include placeholder text-indent: 0px; transition: text-indent 300ms; > &:focus @include placeholder text-indent: 500px; > > >Всё вместе
Чтобы использовать код анимаций для плэйсхолдеров было приятно и удобно, можно написать небольшую библиотеку миксинов для любого препроцессора. Библиотека выглядит следующим образом (посмотреть на SassMeister):
@mixin placeholder &::-webkit-input-placeholder @content> &:-moz-placeholder @content> &::-moz-placeholder @content> &:-ms-input-placeholder @content> > @mixin pl-shift($side: left, $position: 500px, $duration: 200ms) @include placeholder text-indent: 0; transition: text-indent $duration; > &:focus @include placeholder text-indent: if($side == left, -$position, $position); > > > @mixin pl-slide-down($position: 5, $duration: 200ms) @include placeholder line-height: 1; transition: line-height $duration; > &:focus @include placeholder line-height: $position; > > > @mixin pl-fade-out($duration: 200ms) @include placeholder opacity: 1; transition: opacity $duration; > &:focus @include placeholder opacity: 0; > > >Использовать её очень просто. Достаточно подключить желаемый миксин к любому полю ввода или просто создать одно глобальное правило для всех пэйсхолдеров на странице:
// Для отдельных элементов .pl-shift-right @include pl-shift( right ); > .pl-fade-out @include pl-fade-out; > // Для всего остального @include pl-shift( left );Autoprefixer
Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный CSS файл превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer. С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент ::placeholder :
::placeholder color: orange; > .input::placeholder color: blue; >После парсинга ваших стилей Autoprefixer создаст отдельный CSS файл, в котором пропишет все необходимые префиксы для всех указанных вами браузеров.
Что дальше
Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс :placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).
Применять стили с помощью :placeholder-shown будет гораздо проще:
.input:placeholder-shown color: blue; >