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

Question

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

3613

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

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

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

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

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

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

David Murdoch 09 апр. 2010, в 20:24

Источник

362

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

Да, мне в голову пришла мысль, что это может быть похоже на попытку стилизовать атрибут «title» элемента. Так что +1 за одинаковое мышление!
David Murdoch 09 апр. 2010, в 20:01
4

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

@HEX Это не похоже на селектор input , потому что он выбирает все элементы input . :placeholder-shown только те элементы input , которые в данный момент показывают заполнитель, позволяя вам стилизовать только эти элементы и эффективно стилизовать текст заполнителя. Что ты пытаешься сказать?
Mathias Bynens 19 янв. 2016, в 14:19
1

@HEX (Конечно, он также выбрал элементы textarea , которые показывают заполнитель текста.)
Mathias Bynens 21 янв. 2016, в 10:18
0

Я не вижу здесь никаких проблем ... Цвет текста заполнителя теперь красный. Возможно другие современные браузеры теперь поддерживают это.
Lloyd Dominic 24 май 2017, в 05:28
0

Поскольку это горячая тема , я предложил другой подход, имитирующий заполнитель , который может представлять интерес
LGSon 02 июнь 2017, в 18:30
0

Есть ли способ изменить цвет одиночного символа в заполнителе?
Dhaval Pankhaniya 31 окт. 2017, в 05:39

Показать ещё 6 комментариев

Теги:

html

css

html5

placeholder

html-input

37 ответов

658

/* 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.

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

brillout 14 март 2012, в 16:41

2

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

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

После FF19 вы должны использовать :: - moz-placeholder
viplezer 06 окт. 2013, в 13:22
1

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

Показать ещё 2 комментария

273

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

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

Matt 11 май 2011, в 01:53

2

при печати в Chrome не работает ... любая помощь @media print {input [type = text] .form-control :: - webkit-input-placeholder, input [type = textarea] .form-control :: - webkit -input-placeholder {color: #FFFFFF; }}
Mahdi Alkhatib 11 нояб. 2015, в 19:07

96

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

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

EIIPII 06 июнь 2013, в 09:44

16

Или даже проще, отредактируйте переменную @input-color-placeholder - обычно она находится в variables.less
William 08 окт. 2014, в 21:55
0

@William Не будет ли проще определить сам селектор и использовать миксин, чтобы избежать необходимости возвращаться и изменять его в случае, если вы хотите сделать заполнитель другого входа другим цветом?
Brandito 18 фев. 2018, в 22:49
0

@Brandito - звучит как крайний случай - как правило, цвет заполнителя одинаков для всех элементов формы в дизайне.
William 20 фев. 2018, в 00:17
0

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

@ Брандито Все хорошо. Всегда есть крайние случаи.
William 27 фев. 2018, в 20:14

Показать ещё 3 комментария

92

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

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

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

ajcw 09 фев. 2011, в 16:47

71

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

Konst_ 09 дек. 2014, в 11:53

0

Более гибкий способ - использовать @content;
milkovsky 08 май 2017, в 10:33

51

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

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

Love Trivedi 14 сен. 2013, в 14:13

1

Я должен был добавить! Важный в Firefox v56, а также
Savage 17 окт. 2017, в 14:48

45

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

Dionysios Arvanitis 14 фев. 2013, в 22:11

38

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

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

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

Kristian 02 янв. 2014, в 23:41

36

Теперь у нас есть стандартный способ применения CSS к входному заполнителю: ::placeholder псевдоэлемент из this CSS Module Level 4 Draft.

user3790069 16 янв. 2015, в 18:56

0

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

34

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

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

Пример:

input::placeholder { color: black; }

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

Mike 14 авг. 2015, в 11:10

32

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

Burak Tokak 14 апр. 2015, в 00:26

31

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

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

Dragos Rizescu 14 апр. 2013, в 02:41

3

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

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

29

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

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

Alias Varghese 25 июнь 2015, в 09:27

0

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

27

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

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

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

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

gfaceless 04 дек. 2014, в 10:19

15

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

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

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

user1729061 08 окт. 2012, в 21:05

12

что произойдет, если кто-то снова щелкнет после того, как что-то напишет ... исходный текст, который они написали, исчезнет!
Lucky Soni 02 май 2013, в 10:04
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 18 май 2013, в 18:25
9

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

Показать ещё 1 комментарий

14

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

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

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

steady_daddy 03 май 2016, в 14:36

14

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

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

BANTIMATHUR 22 дек. 2015, в 11:45

13

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

-webkit-text-fill-color: red;

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

aviram83 05 авг. 2015, в 09:42

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 .
David Murdoch 05 авг. 2015, в 10:25

6

Для пользователя 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;
}

trungk18 04 окт. 2016, в 08:59

5

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

.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>

Mahendra Kulkarni 31 май 2016, в 09:40

4

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

ahmdabos 04 июнь 2018, в 10:51

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

Md. Abu Sayed 13 окт. 2017, в 08:36

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

Alireza 11 май 2017, в 14:14

3

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

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

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

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

Cryptopat 31 март 2018, в 22:52

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+ */

fraweb 20 дек. 2017, в 16:37

1

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

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

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

Deepak Kumar 20 дек. 2017, в 12:57

1

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

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

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

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

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

См. документы для микширования ввода-заполнителя.

bendav91 20 сен. 2016, в 13:21

0

Заполнитель зависит от некоторой поддержки браузера и некоторых CSS, но некоторые поддерживают разные CSS.

.yourClassName::-webkit-input-placeholder {
    color: #00bcea;
}
.yourClassName::-moz-placeholder {
    color: #00bcea;
}
.yourClassName:-ms-input-placeholder {
    color: # 00 bcea;
}

И вы также можете использовать input/ textarea.

Avanish Kumar 04 июнь 2018, в 11:07

0

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

::-webkit-input-placeholder{ // for chrome
    color: red;
}

:-moz-input-placeholder{ //for mozila
    color: green;
}

::-ms-input-placeholder{ //for IE
     color: blue;
}

Pushp Singh 04 июнь 2018, в 11:00

0

Попробуйте этот простой и простой способ для целевого заполнителя

input::-webkit-input-placeholder { /* Chrome */
 color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: red;

}
input:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;

}

Santosh Khalse 04 июнь 2018, в 10:56

0

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

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

James 04 июнь 2018, в 10:48

0

<!DOCTYPE html>
<html>
<body>
<style>
::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}
</style>
<form action="demo_form.asp">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>



</body>
</html>

Примечание. Атрибут placeholder входного тега не поддерживается в Internet Explorer 9 и более ранних версиях.

Mukesh Goyal 04 июнь 2018, в 10:31

0

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

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

aphoe 23 окт. 2017, в 19:41

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>

SUNIL KUMAR E.U 18 окт. 2017, в 11:31

-1

В html файле:

<input type="text" placeholder="placeholder" class="redPlaceHolder">

В файле css:

.redPlaceHolder{
   color: #ff0000;
}

Joshua Charles Pickwell 27 нояб. 2017, в 20:00

-2

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

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

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }

Anand 22 сен. 2017, в 15:02

Ещё вопросы

Быстрый хедз-ап (не решение, просто к сведению): если я правильно помню, input [placeholder] просто совпадает с тегами <input>, у которых есть атрибут placeholder, он не соответствует самому атрибуту placeholder.
Да, мне в голову пришла мысль, что это может быть похоже на попытку стилизовать атрибут «title» элемента. Так что +1 за одинаковое мышление!
@MathiasBynens : псевдокласс : показанный заполнитель соответствует элементу ввода, который отображает такой заполнитель. Таким образом, он соответствует тегу <input> , как и селектор input , но только что показывает текст-заполнитель. Он также не соответствует самому атрибуту заполнителя.
@HEX Это не похоже на селектор input , потому что он выбирает все элементы input . :placeholder-shown только те элементы input , которые в данный момент показывают заполнитель, позволяя вам стилизовать только эти элементы и эффективно стилизовать текст заполнителя. Что ты пытаешься сказать?
@HEX (Конечно, он также выбрал элементы textarea , которые показывают заполнитель текста.)
Я не вижу здесь никаких проблем ... Цвет текста заполнителя теперь красный. Возможно другие современные браузеры теперь поддерживают это.
Поскольку это горячая тема , я предложил другой подход, имитирующий заполнитель , который может представлять интерес
Есть ли способ изменить цвет одиночного символа в заполнителе?
В документе MSDN, на который вы ссылаетесь, указано, что он поддерживается только в Internet Explorer 10. Это хорошая находка, но не очень полезная, пока пользовательская база IE10 не станет существенной (для этого могут потребоваться временные рамки).
Реально, вы захотите создать единообразный стиль заполнителей на сайте, а не каждый отдельный ввод по идентификатору.
После FF19 вы должны использовать :: - moz-placeholder
Вам нужно поместить этот CSS внизу таблицы стилей, если вы также применяете класс для ввода, чтобы он работал в IE (11). Смотрите этот форк на JSFiddle jsfiddle.net/9kkef . Откройте страницу как в IE, так и в другом браузере, в IE вы увидите, что текст заполнителя будет иметь цвет применяемого класса.
при печати в Chrome не работает ... любая помощь @media print {input [type = text] .form-control :: - webkit-input-placeholder, input [type = textarea] .form-control :: - webkit -input-placeholder {color: #FFFFFF; }}
Или даже проще, отредактируйте переменную @input-color-placeholder - обычно она находится в variables.less
@William Не будет ли проще определить сам селектор и использовать миксин, чтобы избежать необходимости возвращаться и изменять его в случае, если вы хотите сделать заполнитель другого входа другим цветом?
@Brandito - звучит как крайний случай - как правило, цвет заполнителя одинаков для всех элементов формы в дизайне.
@William Извините, я ужасно формулирую этот материал, я подумал, что было бы лучше использовать миксин с аргументом желаемого цвета ввода, хотя, честно говоря, я, вероятно, думаю о крайних случаях, которые я Я привык (стилизовать местозаполнитель поискового ввода, где он находится на цветном фоне: P) извините, но вы правы.
@ Брандито Все хорошо. Всегда есть крайние случаи.
Более гибкий способ - использовать @content;
Я должен был добавить! Важный в Firefox v56, а также
Это работает в Firefox 51. Я просто собираюсь использовать этот метод; другие браузеры достаточно скоро меня догонят (учитывая, что ни одна функциональность не нарушена, если не будет применен стандартный стиль).
Это старый способ сделать это, который я использовал довольно часто. Недостатком является то, что текст-заполнитель исчезает при фокусировке. Я нахожу это раздражающим, когда пользовательский интерфейс также не содержит надписей рядом со входом. За последние несколько месяцев я начал заменять этот метод на использование текста-заполнителя, что, на мой взгляд, является улучшением UX.
Другая проблема с кодом, подобным этому, заключается в том, что ваш серверный код должен иметь дело с текстом-заполнителем как пустым вводом, что имеет проблемы с крайними случаями, когда вы хотите ввести город под названием «Город». Вместо того, чтобы сравнивать значения с текстом-заполнителем, вы должны действительно использовать на входе флаг с измененными данными, а затем очистить ввод в форме отправки, если этот флаг не установлен. А для интерфейсов AJAX у вас может даже не быть формы, поэтому вы должны иметь возможность связать произвольное событие отправки с входом. Это одна из тех действительно простых ситуаций, которой нет.
Не используйте это больше. Есть еще несколько элементов с заполнителями и большим количеством префиксов. Посмотрите решения выше или используйте ::placeholder вместе с autoprefixer.
что произойдет, если кто-то снова щелкнет после того, как что-то напишет ... исходный текст, который они написали, исчезнет!
@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;"/>
Даже ваша вторая версия не обеспечивает такую же функциональность. Если пользователь отправляет <form> с этим вводом, текст заполнителя будет отправлен на сервер. Я видел, как много сайтов делают это неправильно.
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 .

fuxia · Accepted Answer · 2010-04-09T20-55-00.000Z

Реализация

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

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-селектор для заполнители.

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

Селектора CSS

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

a group селекторов, содержащих недопустимый селектор, недействителен.

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

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

Подождите ... версия WebKit является псевдоэлементом, а версия Gecko - псевдоклассом. Разве стили не будут применены к совершенно другим вещам тогда?
@BoltClock Да, именно поэтому вам нужен -webkit-appearance чтобы -webkit-appearance заполнил его родительский блок. В Mozilla вы вводите статус , а в WebKit - дочерний элемент . Стандартов нет, и у обеих реализаций есть свои плюсы и минусы… Я думаю, что у Mozilla более последовательный подход: он вписывается в ту же схему, что и :empty или :invalid .
-moz-placeholder больше не работает в FF6.0 = /
Протестировано в версии 8.a.2 только сейчас - все еще работает. Обратите внимание на ведущий : in :-moz-placeholder .
Вам не хватает : для селекторов -moz?
Также обратите внимание, что хотя Webkit считает, что это имеет довольно сильную специфику, Mozilla этого не делает. Скорее всего, вам придётся добавить туда нескольких импортеров, чтобы увидеть вещи.
@FuzzyDunlop: Это даже странно - псевдоэлементы (реализация WebKit) менее специфичны, чем псевдо-классы (реализация Mozilla). Возможно.
Используя Firefox 12.0 на Mac, можно изменить цвет заполнителя с помощью обычного ввода {color: red}, проверьте это JSFiddle: jsfiddle.net/9tarR Ошибка?
@ Оскар Не обязательно. Все еще нет стандарта, который говорит, что должно произойти в этом случае.
@toscho Довольно раздражает, поскольку использование чего-то вроде HTML5 Boilerplate приведет к тому, что тексты-заполнители не будут «затемнены» при использовании Firefox: /
@toscho: спасибо за отличный ответ. Мне просто нужна была небольшая демонстрация этого «вживую», так что ваш пример также можно найти здесь: jsfiddle.net/Sk8erPeter/KyVXK . Еще раз спасибо.
Вы также можете изменить любое другое определение CSS, например, удалить непрозрачность по умолчанию. В этом случае помните, что IE использует фильтр. фильтр: альфа (непрозрачность = 1);
Заполнитель Firefox, кажется, по умолчанию с уменьшенной непрозрачностью. Для всех, кто сильно освежает и удивляется, почему, черт возьми, это не работает («почему мой белый текст все еще серый…»), используйте непрозрачность: 1
Что касается примечания «Mozilla Firefox 19+ использует псевдоэлемент: :: - moz-placeholder, но старый селектор все еще будет работать некоторое время». - это больше не работает, по крайней мере, для меня (FF v20)
@toscho Is -moz-appearance: textfield; Appearance -moz-appearance: textfield; для Firefox / Mac? Потому что я не видел каких-либо дополнений таблиц стилей агента пользователя на ПК ...
@VolkerE. Это для всех браузеров на базе Mozilla.
@toscho Извините, мой вопрос, кажется, не достаточно ясен: к каким конкретным версиям относится это свойство? Потому что в Windows Firefox 5 || 19 || 21 не меняет внешний вид ввода [type = "search"]. И я пока не нашел ни одного документа, в котором говорится, что Firefox - в отличие от Chrome - меняет внешний вид по умолчанию.
@VolkerE. Перейдите по ссылке свойства .
@toscho Я тестировал в Fx / Mac (Aurora) и Seamonkey, и ни у одного из них не было различий в визуализации [type="search"] по сравнению с обычным полем ввода текста. Таким образом, аналогично normalize.css единственным необходимым свойством является -webkit-appearance: textfield;
Объяснение правила CSS-селектора должно быть позолочено. Я много боролся, прежде чем понял, что правило игнорируется.
мне пришлось применить input [type = text] :: - webkit-input-placeholder, чтобы получить заполнитель для получения цвета, если я только применил input :: - webkit-input-placeholder он не работает. Он также работает с Id
В IE10 *:-ms-input-placeholder и :-ms-input-placeholder сами по себе не работают, но INPUT:-ms-input-placeholder работает. Странный.
Примечание для Bootstrap 3: класс «form-control» переопределяет цвет из-за специфики CSS (т. Е. «Form-control :: - webkit-input-placeholder»), поэтому вам нужно быть хотя бы настолько специфичным или использовать «! Important» в вашем CSS. (это был ад для отладки, так как ни Firebug, ни Devtools, похоже, не показывают этот псевдокласс)
Мне нужно было «непрозрачность: 1», чтобы мой CSS работал в FF 33.1 stackoverflow.com/questions/27041153/…
Как подать заявку на номер? Это не похоже на работу: input[type="number"]::-webkit-input-placeholder {color: green;}
Хотелось бы, чтобы в этом ответе также упоминался ::placeholder (как упоминалось в других ответах), который больше похож на специфичные для поставщика, чем :placeholder-shown .
Недавно я заметил, что Chrome также работает с непрозрачностью заполнителей. Я должен был добавить opacity: 1; to ::-webkit-input-placeholder { } .
@Luke Будьте осторожны, устанавливая opacity в любое значение, отличное от 1 из-за Edge parsing ::webkit-input-placeholder и сталкиваясь с ошибкой вместе с position заданным relative или absolute . Смотрите github.com/necolas/normalize.css/commit/… для получения дополнительной информации.
@VolkerE. Это всего лишь один коммит, без объяснения, без ссылки. Я бы не отнесся к этому очень серьезно.
@ toscho Пожалуйста, перейдите по ссылке в коммите developer.microsoft.com/en-us/microsoft-edge/platform/issues/… ;)
Следует отметить, что (по крайней мере, в самых последних браузерах, которые я тестировал) вы можете установить цвет на color: inherit и он будет наследовать любой цвет, на который вы установили элемент (в случаях, когда вы не хотите другой цвет).