Изменить цвет заполнителя ввода HTML5 с помощью CSS


3977

Chrome поддерживает атрибут placeholder для input[type=text]элементов (вероятно, для других).

Но следующее CSSне влияет на значение заполнителя:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Valueбудет по- прежнему остаются greyвместо red.

Есть ли способ изменить цвет текста заполнителя?


375
Быстрый хедз-ап (не решение, просто к сведению): если я правильно помню, input [placeholder] просто совпадает с тегами <input>, у которых есть атрибут placeholder, он не соответствует самому атрибуту placeholder.
pinkgothic

12
Да, мне в голову пришла мысль, что это может быть похоже на попытку стилизовать атрибут «title» элемента. Так что +1 за одинаковое мышление!
Дэвид Мердок

5
@MathiasBynens : псевдокласс : показанный заполнитель соответствует элементу ввода, который отображает такой заполнитель. Таким образом, он соответствует <input>тегу, как inputселектор, но показывает текст заполнителя только сейчас. Он также не соответствует самому атрибуту заполнителя.
HEX

3
@HEX Это не похоже на inputселектор, потому что он выбирает все inputэлементы. :placeholder-shownвыбираются только те inputэлементы, которые в настоящее время показывают заполнитель, что позволяет стилизовать только эти элементы и эффективно стилизовать текст заполнителя. Что ты пытаешься сказать?
Матиас Биненс

1
@HEX (Конечно, он также выбрал textareaэлементы, которые показывают заполнитель текста.)
Mathias Bynens

Ответы:


4809

Реализация

Существует три разных реализации: псевдоэлементы, псевдоклассы и ничего.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) и Microsoft Гурт используют псевдо-элемент: ::-webkit-input-placeholder. [ Ссылка ]
  • Mozilla Firefox с 4 по 18 использует псевдокласс: :-moz-placeholder( одна двоеточие). [ Ссылка ]
  • Mozilla Firefox 19+ использует псевдоэлемент:, ::-moz-placeholderно старый селектор все еще будет работать некоторое время. [ Ссылка ]
  • Internet Explorer 10 и 11 используют псевдо-класс: :-ms-input-placeholder. [ Ссылка ]
  • Апрель 2017: большинство современных браузеров поддерживают простой псевдоэлемент ::placeholder [ Ref ]

Internet Explorer 9 и ниже не поддерживает placeholderатрибут вообще, в то время как Opera 12 и ниже не поддерживают CSS-селектор для заполнителей.

Дискуссия о наилучшей реализации все еще продолжается. Обратите внимание, что псевдоэлементы действуют как реальные элементы в Shadow DOM . A paddingon inputне получит тот же цвет фона, что и псевдоэлемент.

CSS селекторы

Пользовательские агенты должны игнорировать правило с неизвестным селектором. См. Уровень выбора 3 :

группа селекторов , содержащая недействительный селектор является недействительной.

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

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">

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

  • Будьте осторожны, чтобы избежать плохих контрастов. Заполнитель Firefox, кажется, по умолчанию с уменьшенной непрозрачностью, поэтому его нужно использовать opacity: 1здесь.
  • Обратите внимание, что текст-заполнитель просто обрезается, если он не помещается, - измерьте входные элементы emи протестируйте их с большими настройками минимального размера шрифта. Не забывайте переводы: некоторым языкам нужно больше места для одного и того же слова.
  • Браузеры с поддержкой HTML, placeholderно без поддержки CSS (например, Opera) также должны быть протестированы.
  • Некоторые браузеры используют дополнительный CSS по умолчанию для некоторых inputтипов ( email, search). Это может повлиять на рендеринг неожиданным образом. Используйте свойства -webkit-appearance и, -moz-appearanceчтобы изменить это. Пример:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

27
Также обратите внимание, что хотя Webkit считает, что это имеет довольно сильную специфику, Mozilla не имеет. Скорее всего, вам придётся добавить туда нескольких импортеров, чтобы увидеть вещи.
ДМНЦ

18
@toscho: спасибо за отличный ответ. Мне просто нужна была небольшая демонстрация этого «вживую», так что ваш пример также можно найти здесь: jsfiddle.net/Sk8erPeter/KyVXK . Еще раз спасибо.
Sk8erPeter

90
Заполнитель Firefox, кажется, по умолчанию с уменьшенной непрозрачностью. Для всех, кто сильно освежает и удивляется, почему, черт возьми, это не работает («почему мой белый текст все еще серый…»), используйте непрозрачность: 1
jwinn

8
В IE10 *:-ms-input-placeholderи :-ms-input-placeholderсамо по себе не работает, но INPUT:-ms-input-placeholderработает. Странный.
Джаред

37
Примечание для Bootstrap 3: класс «form-control» переопределяет цвет из-за специфики CSS (т. Е. «Form-control :: - webkit-input-placeholder»), поэтому вам нужно быть хотя бы настолько специфичным или использовать «! Important» в вашем CSS. (это был ад для отладки, поскольку ни Firebug, ни Devtools, кажется, не показывают этот псевдо-класс)
Коста,

725

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

Это будет стиль всех inputи textareaзаполнителей.

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


2
В документе MSDN, на который вы ссылаетесь, указано, что он поддерживается только в Internet Explorer 10. Это хорошая находка, но не очень полезная, пока пользовательская база IE10 не станет существенной (для этого могут потребоваться временные рамки).
Данишоэль

1
Реально, вы захотите создать единообразный стиль заполнителей на сайте, а не каждый отдельный ввод по идентификатору.
BadHorsie

10
После FF19 вы должны использовать :: - moz-placeholder
viplezer

1
Вам нужно поместить этот CSS внизу таблицы стилей, если вы также применяете класс для ввода, чтобы он работал в IE (11). Смотрите этот форк на JSFiddle jsfiddle.net/9kkef . Откройте страницу как в IE, так и в другом браузере, в IE вы увидите, что текст заполнителя будет иметь цвет применяемого класса.
Timo002

Иногда, если не работает, добавьте свойство <! Важный> к цвету.
Ахмед На.

277

Вы можете также хотеть стиль textareas:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

2
при печати в Chrome не работает ... любая помощь @media print {input [type = text] .form-control :: - webkit-input-placeholder, input [type = textarea] .form-control :: - webkit -input-placeholder {color: #FFFFFF; }}
Махди Алхатиб

107

Для пользователей Bootstrap и Less существует миксин .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

16
Или даже проще, отредактируйте переменную @input-color-placeholder- обычно находящуюся в variables.less
Уильям

@William Не будет ли проще определить сам селектор и использовать миксин, чтобы избежать необходимости возвращаться и менять его, если вы хотите сделать заполнитель другого входа другим цветом?
Брандито

@Brandito - это звучит как крайний случай - как правило, цвет заполнителя одинаков для всех элементов формы в дизайне.
Уильям

@William Извините, я ужасен в формулировке такого рода вещей, я подумал, что было бы лучше использовать миксин с аргументом нужного вам цвета ввода, хотя, честно говоря, я, наверное, думаю о крайних случаях. Я привык (стилизовать местозаполнитель поискового ввода, где он находится на цветном фоне: P) извините, но вы правы.
Брандито

99

В дополнение к ответу toscho я заметил некоторые несоответствия веб-наборов между Chrome 9-10 и Safari 5 с поддерживаемыми свойствами CSS, которые стоит отметить.

В частности Chrome 9 и 10 не поддерживают background-color, border, text-decorationиtext-transform при укладке заполнителя.

Полное кросс-браузерное сравнение здесь .


76

Для пользователей Sass :

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

Более гибкий способ - использовать@content;
milkovsky

60

Это будет работать нормально. ДЕМО ЗДЕСЬ:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}
<input type="text" placeholder="Value" />


1
Я должен был добавить! Важный в Firefox v56, а также
Savage

49

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

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

41

Кросс-браузерное решение:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Предоставлено: Дэвид Уолш


41

Используйте новый, ::placeholderесли вы используете autoprefixer .

Обратите внимание, что .placeholder mixin от Bootstrap не рекомендуется в пользу этого.

Пример:

input::placeholder { color: black; }

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


40

Теперь у нас есть стандартный способ применить CSS к заполнителю ввода: ::placeholderпсевдоэлемент из этого черновика CSS-модуля уровня 4.


Это работает в Firefox 51. Я просто собираюсь использовать этот метод; другие браузеры достаточно скоро меня догонят (учитывая, что функциональность не нарушена, если не применяется стандартный стиль).
Лонни Бест

36

Я просто понимаю, что для Mozilla Firefox 19+ браузер предоставляет значение непрозрачности для заполнителя, поэтому цвет не будет таким, как вы хотите.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

Я перезаписываю opacityна 1, так что будет хорошо идти.


35

Я не помню, где я нашел этот фрагмент кода в Интернете (он был написан не мной, не помню, где я его нашел и кто его написал).

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

Просто загрузите этот код JavaScript, а затем отредактируйте заполнитель с помощью CSS, вызвав это правило:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

3
Это старый способ сделать это, который я использовал довольно часто. Недостатком является то, что текст-заполнитель исчезает при фокусировке. Я нахожу это раздражающим, когда пользовательский интерфейс также не содержит надписей рядом с вводом. За последние несколько месяцев я начал заменять этот метод на использование текста-заполнителя, что я считаю улучшением UX.
Redtopia

4
Другая проблема с кодом, подобным этому, заключается в том, что ваш серверный код должен иметь дело с текстом-заполнителем как пустым вводом, что имеет проблемы с крайними случаями, когда вы хотите ввести город под названием «Город». Вместо того, чтобы сравнивать значения с текстом-заполнителем, вы должны действительно использовать на входе флаг с измененными данными, а затем очистить ввод в форме отправки, если этот флаг не установлен. А для интерфейсов AJAX у вас может даже не быть формы, поэтому вы должны иметь возможность связать произвольное событие отправки с входом. Это одна из тех действительно простых ситуаций, которой нет.
Whelkaholism

34

Я думаю, что этот код будет работать, потому что заполнитель необходим только для ввода текста типа. Так что этой одной строки CSS будет достаточно для вашей потребности:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

Не используйте это больше. Есть еще несколько элементов с заполнителями и большим количеством префиксов. Посмотрите решения выше или используйте ::placeholderвместе с autoprefixer.
RiZKiT

33

Для пользователей Bootstrap , если вы используете class="form-control", может быть проблема специфичности CSS. Вы должны получить более высокий приоритет:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

Или, если вы используете Less :

.form-control{
    .placeholder(red);
}

19

Если вы используете Bootstrap и не можете заставить это работать, то, вероятно, вы упустили тот факт, что Bootstrap сам добавляет эти селекторы. Это Bootstrap v3.3, о котором мы говорим.

Если вы пытаетесь изменить заполнитель внутри .form-control CSS-класса вы должны переопределить его следующим образом:

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}

17

Этот короткий и чистый код:

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

17

Как насчет этого

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />

Нет CSS или заполнителя, но вы получаете ту же функциональность.


15
что произойдет, если кто-то снова щелкнет после того, как что-то напишет ... исходный текст, который они написали, исчезнет!
Счастливчик Сони

3
@LuckySoni вы могли бы сделать это, но я лично предпочитаю первый. <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>
user1729061

9
Даже ваша вторая версия не обеспечивает такую ​​же функциональность. Если пользователь отправляет <form>с этим вводом, текст заполнителя будет отправлен на сервер. Я видел, как много сайтов делают это неправильно.
LQC

Это опасно! Если вы снова вернетесь к форме, вы потеряли все!
Мобарак Али

15

Я попробовал каждую комбинацию здесь, чтобы изменить цвет на моей мобильной платформе, и в итоге это было:

-webkit-text-fill-color: red;

который сделал свое дело.


2
This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.Мне кажется, что у вас есть другое правило CSS, которое устанавливает colorсвойство.
Дэвид Мердок

8

Для пользователей SASS / SCSS, использующих Бурбон , он имеет встроенную функцию.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Вывод CSS, вы также можете взять эту часть и вставить в свой код.

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

8

попробуйте этот код для другого элемента ввода другого стиля

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

пример 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

пример 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }


5

Добавление очень приятной и простой возможности: фильтры CSS !

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

Это будет стилизовать все, включая заполнитель.

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

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}
<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

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

От: https://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()
<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

Документы фильтров CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter


4

ОК, заполнители ведут себя по-разному в разных браузерах, поэтому вам нужно использовать префикс браузера в вашем CSS, чтобы сделать их идентичными, например, Firefox по умолчанию обеспечивает прозрачность для заполнителя, поэтому нужно добавить непрозрачность 1 в CSS, а также цвет, это не так в большинстве случаев это большая проблема, но хорошо, чтобы они были последовательными:

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

3

Вы можете изменить цвет заполнителя ввода HTML5 с помощью CSS. Если случайно ваш CSS конфликтует, эта заметка кода работает, вы можете использовать (! Важно), как показано ниже.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

Надеюсь, это поможет.


3

Вы можете использовать это для ввода и стиля фокуса:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

2

Самый простой способ будет:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}


1

Вот решение с CSS-селекторами

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
  • WebKit, Blink (Safari, Google Chrome, Opera 15+) и Microsoft Edge используют псевдоэлемент:
    :: - webkit-input-placeholder.
  • Mozilla Firefox с 4 по 18 использует псевдокласс:
    -moz-placeholder (одна двоеточие).
    Mozilla Firefox 19+ использует псевдоэлемент :
    :: - moz-placeholder, но старый селектор все еще будет работать некоторое время.
  • Internet Explorer 10 и 11 используют псевдокласс::
    -ms-input-placeholder.
  • Internet Explorer 9 и ниже не поддерживает атрибут placeholder вообще, а Opera 12 и ниже не поддерживает CSS-селектор для заполнителей.

0

Часть HTML:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

Я покажу, как изменить цвет выражения «Введите предложение» с помощью CSS:

  ::placeholder{
  color:blue;
   }
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.