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

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

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

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

Value все равно останется grey вместо red.

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

30 3640
html css html5 placeholder html-input

30 ответов:

Реализация

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

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

Обсуждение о наилучшей реализации пока речь не идет. Обратите внимание, что псевдо-элементы действуют как реальные элементы в теневом DOM. A padding на 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;
    }
4568

/* 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 заполнителей.

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

668

Вы также можете стилизовать текстовые области: 

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

Для Bootstrap и меньше пользователей, есть mixin .заполнитель: 

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

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

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

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

94

Для 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);
}
70

Это будет прекрасно работать. ДЕМОНСТРАЦИЯ ЗДЕСЬ: 

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" />
53

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

::-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; 
}
45

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

/* 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; }

Кредит: Дэвид Уолш

39

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

37

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

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

Пример: 

input::placeholder { color: black; }

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

37

Я просто понимаю, что для 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, так что будет хорошо идти.

34

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

$('[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. */
}
32

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

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

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

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

Или если вы используете меньше : 

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

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

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

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

17

Если вы используете 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;
}
16

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

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

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

-webkit-text-fill-color: red;

Что и сделало свое дело.

14

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

//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;
}
7

Вот еще один пример: 

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}
<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>
5

Хорошо, заполнители ведут себя по-разному в разных браузерах, поэтому вам нужно использовать префикс браузера в вашем CSS, чтобы сделать их идентичными, например Firefox дает прозрачность заполнителю по умолчанию, поэтому нужно добавить непрозрачность 1 в ваш css, плюс цвет, это не большая проблема в большинстве случаев, но хорошо, чтобы они были согласованными: {[2]]} 

*::-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;
}
4

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

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;
   }
4

Добавление реальной очень хорошей и простой возможности: 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 filters docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

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!">

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

2

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

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

Compass имеет миксин для этого из коробки.

Возьмем Ваш пример: 

<input type="text" placeholder="Value">

И в SCSS с использованием компаса: 

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

См. раздел docs для ввода-заполнителя mixin.

1

Попробуйте это поможет вам это будет работать во всех ваших браузерах fav: 

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }
0
<style>
    ::-webkit-input-placeholder { 
        color:red; 
     }
    ::-moz-placeholder { 
        color:red; 
    } /* firefox 22+ */
    :-ms-input-placeholder { 
        color:red; 
    } /* ie10,11 */
    input:-moz-placeholder { 
        color:red; 
    }
 </style>
-1

Попробуйте это

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
-1