Как изменить цвет placeholder css

Естественно, что у подсказки placeholder цвет по умолчанию должен быть! и он есть -> черный!

Но, что делать если мы хотим заменить стандартный цвет placeholder на какой-то другой!?

Пример placeholder по умолчанию:

И где взять цвета для использования в покраске !?

Есть отдельная страница с предопределенными цветами.
Или же можно подобрать через генератор цвета

Как изменить цвет placeholder на другой(например:на красный)

Для данного параграфа у нас есть:

Пример изменения цвета placeholder на отдельной странице
Скачать приведенный пример изменения цвета placeholder -> здесь

Для того, чтобы продемонстрировать изменение цвета placeholder нам понадобится поле ввода input

В инпуте прописываем атрибут placeholder, с каким-то текстом :

placeholder=»Здесь текст внутри инпута»

Далее добавим какой-то класс нашему инпуту:

Теперь зададим цвет placeholder-у :

input.example_1::-webkit-input-placeholder /* webkit */
input.example_1::-moz-placeholder /* Firefox 19+ */
input.example_1:-moz-placeholder /* Firefox 18- */
input.example_1:-ms-input-placeholder /* IE */

Как поменять цвет placeholder input. Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS

Из этого туториала Вы узнаете, как изменить цвет замещающего текста (placeholder text color) поля формы.

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

По умолчанию, замещающий текст светло-серый (таким его отображают браузеры). Для того чтобы добавить к этому тексту пользовательские стили, Вам нужно будет использовать браузерные префиксы для свойств CSS.

Для того чтобы изменить цвет замещающего текста, следуйте таким инструкциям:

Составьте код в соответствии со следующей информацией (обратите внимание, что Вам необходимо добавить один и тот же код 4 раза для каждого браузерного префикса):

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

Шаблоны CMS:

Темы WordPress (Темы WooCommerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
Шаблоны Joomla (Шаблоны VirtueMart) /templates/themeXXXX/css/template.css
Темы Drupal /sites/all/themes/themeXXX/css/style.css
Шаблоны Web (HTML5) /css/style.css

Шаблоны E-commerce:

Темы Magento /skin/frontend /default/themeXXX/css/styles.css
Темы PrestaShop /themes/themeXXXX/css/global.css
Темы OpenCart /catalog/view/theme/themeXXX/stylesheet /stylesheet .css
Темы ZenCart /includes/templates/themeXXX/css/stylesheet .css
Шаблоны osCommerce /css/stylesheet .css
Шаблоны Shopify style.css.liquid

Сохраните изменения и загрузите файлы CSS на ваш сервер.

У элементов ввода есть атрибут «placeholder». С его помощью можно вывести текст в поле ввода который исчезает при начале заполнения. Браузеры по разному отображают плейсхолдер, а устаревшие — вовсе не поддерживают. Однако, существуют способы обхода всех недостатков этого полезного атрибута. Рассмотрим следующие моменты:

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

Для примера возьмём текстовое поле input и будем применять к нему стили.

Изменение цвета placeholder

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

Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.

Input-1::-webkit-input-placeholder .input-2::-webkit-input-placeholder . и.т.д.

Убираем placeholder при нажатии на поле

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

:focus::-webkit-input-placeholder /* webkit */ :focus::-moz-placeholder /* Firefox 19+ */ :focus:-moz-placeholder /* Firefox 18- */ :focus:-ms-input-placeholder /* IE */

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

Кроссбраузерность placeholder

Устаревшие браузеры не поддерживают атрибут «placeholder» — он просто не будет отображаться. К таким браузерам относится IE8. Несмотря на прекращение поддержки Internet Explorer, есть «люди» которые им пользуются. Если плейсхолдер не несёт важной информации, то можно забить на его отображение, но если увидеть содержимое подсказки должен каждый, то разработчик обязан позаботиться о полной кроссбраузерности.

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

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

Плагин срабатывает только если браузер не поддерживает плейсхолдеры. В таком случае элементам, к которым он применён, присваивается класс «placeholder», а в «value» записывается текст из атрибута «placeholder». При фокусе «value» очищается. Чтобы текст из атрибута не выглядел точно так же как вводимый текст, оформляем его с помощью стилей, опираясь на устанавливаемый класс. В примере цвет текста неактивного поля будет зелёным. Но увидеть это можно только в IE8 или других устаревших браузерах.

Что такое placeholder (плейсхолдер)? Это английское слово переводится как заполнитель . Используется в качестве пояснения или примера в полях ввода текста (имя, фамилия, e-mail и т. п.), в виде атрибута.

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

До сих пор нет единого мнения, является ли плейсхолдера псевдоклассом или псевдоэлементом. на основе WebKit/blink и Gecko (Firefox 19+) считают псевдоклассом (:, обозреватели Internet Explorer (движок Trident) и Firefox 18- относят к псевдоэлементам (. Opera 12 вообще не позволяет изменять оформление, хотя атрибут поддерживается. И пока в CSS не будет официально закреплён этот пресдо-тип, склока между разработчиками продолжится.

К счастью, устаревшие браузеры довольно оперативно заменяются новыми версиями — Chrome и Firefox с ускоренным циклом разработки «дисциплинировали» пользователей.

Если решите поддерживать старые версии обозревателей (Opera 12, IE8 для Windows XP, IE9 — Windows Vista), придётся действовать .

Про placeholder сказал уже кучу раз, давайте посмотрим, как его можно использовать.

Как обычно выглядит форма:

Пример с плейсхолдером:

Таким нехитрым способом удаётся сократить итоговые размеры форм. Увы, но в примере выше есть один недостаток: внешний вид плейсхолдера отдаётся на откуп браузеру. Если учесть, что многие обозреватели устанавливают заполнителя серым, это лишает возможности использовать серые поля ввода.

Изменяем вид placeholder посредством css

Теперь, сделаем цвет плейсхолдера оранжевым и более блеклым (полупрозрачным):

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

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

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

::-webkit-input-placeholder ::-moz-placeholder /* Firefox 19+ */ :-moz-placeholder /* Firefox 18- */ :-ms-input-placeholder

Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:
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-а в поле ввода.

В результате получаем поле ввода такого с placeholder такого вида:

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

:focus::-webkit-input-placeholder :focus::-moz-placeholder :focus:-moz-placeholder :focus:-ms-input-placeholder

Как поменять цвет placeholder input. Как изменить цвет placeholder с помощью css

Псевдоэлемент::placeholder color ( в некоторых случаях псевдокласс ) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder : .

Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:

Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.

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

Разница между:placeholder-shown и::placeholder

: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

Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43 , а справа — Chrome 47 :

Так происходит потому, что по умолчанию все «заглушки » в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:

Попробуйте открыть это демо в браузере Firefox .

Поддержка стилей

Псевдоэлемент поддерживает следующие свойства:

font properties ;
color ;
background properties ;
word-spacing ;
letter-spacing ;
text-decoration ;
vertical-align ;
text-transform ;
line-height ;
text-indent ;
opacity ;

Дополнительные ресурсы

Документация MDN
Документация IE
Развёрнутая статья на блоге Treehouse

Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. CSS стиль для placeholder, мы и постараемся сегодня прописать.

Задача: сделать свой css стиль для placeholder

Допустим у нас есть стильный сайт, в котором в input используется placeholder. Нам нужно сделать так, чтобы серый муторный стиль текста placeholder’a выглядел в общем стиле сайта. Как же этого достичь? Сразу скажу, что это работает пока не во всех браузерах. Конкретно в IE версии 9 и ниже не работает вообще, в 10 и далее пока работает с большими трудностями. Другое дело Firefox и webkit-браузеры.

Решение: css стиль для placeholder

Итак, задачу мы поставили, как же будем её решать?

Сначала сделаем полигон для тестирования:

Готово, теперь посмотрим, что можно сделать со стилем: у webkit и mozilla есть собственные модификаторы, которые позволяют назначать особенный стиль для placeholder: ::-webkit-input-placeholder и:-moz-placeholder. Посмотрим как их использовать:

Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):

Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):

Сделаем текст плейсхолдера красным жирным курсивом. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.

Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:

Готово. CSS стиль для placeholder, естественно вы можете прописать любой, какой больше подходит для вашего дизайна. Рабочее демо можно посмотреть на jsFiddle или чуть ниже:

Надеюсь, эта статья поможет вам сделать ваш сайт более удобным для пользователей.

Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот — это атрибут placeholder, который есть у элементов, которые созданы для ввода текста (input). С помощью него можно задать текст, который будет отображаться как подсказка до начала ввода в данное поле. К сожалению, не все браузеры одинаково корректно работают с данным атрибутом. Устаревшие версии и вовсе данный текст не отображают.

Теперь рассмотрим как сделать так, чтобы решить нижеописанные проблемы:

1. Как изменить стили для плейсхолдера;
2. Как скрыть текст плейсхолдера не при вводе, а уже при нажатии на поле;
3. Что делать с браузерами, где в принципе не отображается placeholder.

Во всех примерах будем работать с полем input.

Как изменить цвет текста-подсказки в placeholder в input?

По умолчанию во многих браузерах цвет подсказки — серый. В данном примере сделаем его чёрным.

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

И да, можно использовать для указания этих свойств классы. Смотрим ниже:

Input-phone::-webkit-input-placeholder
.input-text::-webkit-input-placeholder
/* и так далее. */

Убираем placeholder при нажатии на поле

:focus::-webkit-input-placeholder /* webkit */
:focus::-moz-placeholder /* Firefox 19+ */
:focus:-moz-placeholder /* Firefox 18- */
:focus:-ms-input-placeholder /* IE */

Можно даже настроить плавное изменение прозрачности или изменение цвета сss-анимацией. Но с кроссбраузерностью таких решений могут возникнуть проблемы.

А что делать с бразуерами, которые не поддерживают атрибут placeholder в input?

Для решения этой проблемы скачайте популярный для этого jquery плагин — jquery.placeholder. Ссылок давать не буду, так как сегодня-завтра они изменятся. Но, если что, можете скачать рабочий пример с плагином в — скачать исходники.

Подключаем его. Не стоит забывать, что нужен ещё и в принципе jquery подключить.

Атрибут placeholder используется для создания подсказок внутри пустых полей ввода (теги и

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

Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:

При разработке интерфейсов следует учитывать особенности поведения плэйсхолдеров. Текст плэйсхолдера исчезает, как только начинается ввод. Именно поэтому не стоит использовать их для передачи информации о самом поле ввода (сколько и какие именно символов оно должно содержать). Для данных целей лучше всего использовать тег или параграф с небольшой подсказкой. Подробнее об особенностях использования плэйсхолдеров можно почитать .

Стилизация

Для стилизации плэйсхолдеров используются следующие правила:

::-webkit-input-placeholder ::-moz-placeholder /* Firefox 19+ */ :-moz-placeholder /* Firefox 18- */ :-ms-input-placeholder

Выглядит ужасно, не так ли? И на это есть причина — до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse .

Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:

В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на SassMeister):

// Глобально для каждого поля ввода @include placeholder // Для определённых полей ввода .input >

Пример

Синий текст для плэйсхолдера (никогда так не делайте):

.blue-text ::-webkit-input-placeholder .blue-text :-moz-placeholder .blue-text ::-moz-placeholder .blue-text :-ms-input-placeholder

Поддерживаемые свойства

Не каждое 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

Читать:

Как найти скрытую заметку на xiaomi

Анимации

Идеи анимаций принадлежит блогу html5.by .

Все следующие примеры написаны с использованием препроцессора Sass . К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.

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

Изменение прозрачности

Сдвиг вправо и влево

Чем больше ширина поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .

Сдвиг вниз

Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.

Всё вместе

Чтобы использовать код анимаций для плэйсхолдеров было приятно и удобно, можно написать небольшую библиотеку миксинов для любого препроцессора. Библиотека выглядит следующим образом ():

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

// Для отдельных элементов .pl-shift-right .pl-fade-out // Для всего остального @include pl-shift ( left );

Autoprefixer

Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный CSS файл превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer . С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент::placeholder:

::placeholder . input : : placeholder

После парсинга ваших стилей Autoprefixer создаст отдельный CSS файл, в котором пропишет все необходимые префиксы для всех указанных вами браузеров.

Что дальше

Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс:placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).

Как добавить или изменить CSS стиль в «input» для «placeholder»

Приветствую читателей блога BlogGood.ru!
Часто в HTML форму в поле «input» прописывают «placeholder».
В «placeholder» вставляют временный текст-подсказку, который исчезнет при вводе текста пользователем.
Так вот, на этот текст-подсказку, который выводится при помощи «placeholder», я и покажу, как добавлять свои CSS стили, точнее, покажу, как поменять цвет, размер текста и выбрать другой шрифт.

Если у вас нет готового поля с «placeholder» для примера, я его пропишу (скопируйте себе):

Результат:

Сейчас временный текст-подсказка сероватого цвета. А чтобы придать тексту «placeholder» свой стиль, нужно прописать всего пару строк.
Откройте CSS и вставьте вот эти строки:

Надеюсь, в коде все понятно, там ведь есть подсказки. Но, если возникнут вопросы, пишите…
Удачи!

Css цвет placeholder в input. Как изменить цвет placeholder с помощью css

Теперь рассмотрим как сделать так, чтобы решить нижеописанные проблемы:

Во всех примерах будем работать с полем input.

Как изменить цвет текста-подсказки в placeholder в input?

По умолчанию во многих браузерах цвет подсказки — серый. В данном примере сделаем его чёрным.

И да, можно использовать для указания этих свойств классы. Смотрим ниже:

Input-phone::-webkit-input-placeholder
.input-text::-webkit-input-placeholder
/* и так далее. */

Убираем placeholder при нажатии на поле

:focus::-webkit-input-placeholder /* webkit */
:focus::-moz-placeholder /* Firefox 19+ */
:focus:-moz-placeholder /* Firefox 18- */
:focus:-ms-input-placeholder /* IE */

А что делать с бразуерами, которые не поддерживают атрибут placeholder в input?

Подключаем его. Не стоит забывать, что нужен ещё и в принципе jquery подключить.

Задача: сделать свой css стиль для placeholder

Решение: css стиль для placeholder

Итак, задачу мы поставили, как же будем её решать?

Сначала сделаем полигон для тестирования:

Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):

Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):

Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:

Надеюсь, эта статья поможет вам сделать ваш сайт более удобным для пользователей.

Из этого туториала Вы узнаете, как изменить цвет замещающего текста (placeholder text color) поля формы.

Для того чтобы изменить цвет замещающего текста, следуйте таким инструкциям:

Шаблоны CMS:

Темы WordPress (Темы WooCommerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
Шаблоны Joomla (Шаблоны VirtueMart) /templates/themeXXXX/css/template.css
Темы Drupal /sites/all/themes/themeXXX/css/style.css
Шаблоны Web (HTML5) /css/style.css

Шаблоны E-commerce:

Темы Magento /skin/frontend /default/themeXXX/css/styles.css
Темы PrestaShop /themes/themeXXXX/css/global.css
Темы OpenCart /catalog/view/theme/themeXXX/stylesheet /stylesheet .css
Темы ZenCart /includes/templates/themeXXX/css/stylesheet .css
Шаблоны osCommerce /css/stylesheet .css
Шаблоны Shopify style.css.liquid

Сохраните изменения и загрузите файлы CSS на ваш сервер.

Если решите поддерживать старые версии обозревателей (Opera 12, IE8 для Windows XP, IE9 — Windows Vista), придётся действовать .

Про placeholder сказал уже кучу раз, давайте посмотрим, как его можно использовать.

Как обычно выглядит форма:

Пример с плейсхолдером:

Изменяем вид placeholder посредством css

Теперь, сделаем цвет плейсхолдера оранжевым и более блеклым (полупрозрачным):

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

::-webkit-input-placeholder ::-moz-placeholder /* Firefox 19+ */ :-moz-placeholder /* Firefox 18- */ :-ms-input-placeholder

В результате получаем поле ввода такого с placeholder такого вида:

:focus::-webkit-input-placeholder :focus::-moz-placeholder :focus:-moz-placeholder :focus:-ms-input-placeholder

Похожие публикации:

Как найти заблокированные контакты в whatsapp
Как нарисовать мульта на айпад
Как убрать время посещения в whatsapp на айфоне 11
Как убрать фон на фото на ipad

Как изменить цвет placeholder с помощью css

Что такое placeholder (плейсхолдер)? Это английское слово переводится как заполнитель. Используется в качестве пояснения или примера в полях ввода текста (имя, фамилия, e-mail и т. п.), в виде атрибута.

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

До сих пор нет единого мнения, является ли селектор выбора плейсхолдера псевдоклассом или псевдоэлементом. Браузеры на основе WebKit/blink и Gecko (Firefox 19+) считают псевдоклассом (:, обозреватели Internet Explorer (движок Trident) и Firefox 18- относят к псевдоэлементам (. Opera 12 вообще не позволяет изменять оформление, хотя атрибут поддерживается. И пока в CSS не будет официально закреплён этот пресдо-тип, склока между разработчиками продолжится.

Если решите поддерживать старые версии обозревателей (Opera 12, IE8 для Windows XP, IE9 — Windows Vista), придётся действовать с помощью JavaScript.

Про placeholder сказал уже кучу раз, давайте посмотрим, как его можно использовать.

Как обычно выглядит форма:

form>p>Ваше имя:br>input value="">p>form>

Пример с плейсхолдером:

form>p>input value="" placeholder="Ваше имя">p>form>

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

Изменяем вид placeholder посредством css

 ::-webkit-input-placeholder < /* вид для Chrome/Safari/. */ >::-moz-placeholder < /* вид для Firefox */ >:-ms-input-placeholder < /* вид для IE */ >

Теперь, сделаем цвет плейсхолдера оранжевым и более блеклым (полупрозрачным):

 ::-webkit-input-placeholder < color:#f80; opacity:.5; >::-moz-placeholder < color:#f80; opacity:.5; >:-ms-input-placeholder

Вот и всё. Пользуйтесь

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

Свежим хлебушком типа батон —>
днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости продлением домена —>
продлением хостинга на +1 месяц

Как изменить цвет заполнителя Bootstrap-select

После этого работает отлично. Но это также сделало варианты темно-серыми, а не черными. Глянь сюда. Я хочу изменить цвет заполнитель до темно-серого не всех параметров. Как мне лучше всего это сделать? Благодарю. HTML:

РЕДАКТИРОВАТЬ: По какой-то причине чистый CSS-стиль не работает для меня. Я попытался использовать свойство Bootstrap-select native title, но он не greyed, как показано в документах. Есть ли способ Javascript/JQuery изменить цвет span.filter-option.pull-left в зависимости от того, является ли это «Выбрать» или «Вариант 1»? PS. это то, что инструмент инспектора Chrome показывает мне для Select и для варианта 1, нет другого выбора, кроме этих двух.

OneMoreQuestion 26 авг. 2016, в 00:14
Поделиться
Поделиться:
bootstrap-select

3 ответа

Лучший ответ

Основная проблема заключается в том, что плагин (bootstrap-select) на самом деле не имеет установленного способа сделать это. Если вы просто используете одиночный select (non- multiple attribute при select ), вы можете положиться на класс bs-placeholder который будет добавлен при select значения, которое (если вы используете LESS) использует @input-color-placeholder для установки цвета:

.bootstrap-select < . // The selectpicker button >.dropdown-toggle < . &.bs-placeholder, &.bs-placeholder:hover, &.bs-placeholder:focus, &.bs-placeholder:active < color: @input-color-placeholder; >> . >

Единственная проблема заключается в том, что плагин не добавляет класс, если он несколько выбирает, поэтому вам нужно немного креативнуть, чтобы определить, выбрано ли значение. К сожалению, единственная манипуляция атрибутов DOM, которую я вижу по умолчанию, — это изменение названия .dropdown-toggle . Если вы не против жесткого кодирования исходного атрибута title в CSS, вы можете добавить класс, который меняет цвет, если заголовок имеет определенное значение (https://jsfiddle.net/gxvqa5xa/):

.bootstrap-select > .dropdown-toggle[title=Select], .bootstrap-select > .dropdown-toggle[title=Select]:hover, .bootstrap-select > .dropdown-toggle[title=Select]:focus, .bootstrap-select > .dropdown-toggle[title=Select]:active

Теперь, если это слишком грязно или ненадежно, плагин поддерживает прослушиватели событий, поэтому вы можете просто прослушать изменения, проверить, не пусто ли он и добавить класс, если он есть (я предпочитаю этот метод):

$('.selectpicker').on('changed.bs.select', function (e) < $(this).prevAll('.dropdown-toggle').toggleClass('bs-placeholder', this.value === ''); >).trigger('changed.bs.select');

@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css); @import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.css); * .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active