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

Question

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

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

а после CSS ничего не делает со значением заполнителя:

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

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

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

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

3640

css html html-input html5 placeholder

автор: David Murdoch

30 ответов

автор: fuxia · Accepted Answer · 2018-01-07 14:00:37

реализация

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

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 и ниже не поддерживает , а Opera 12 и ниже не поддерживают любой селектор CSS для заполнителей.

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

селекторы CSS

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

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

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

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

автор: brillout · Accepted Answer · 2018-07-19 15:14:22

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

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

автор: Matt · Accepted Answer · 2013-07-23 20:45:21

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

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

автор: EIIPII · Accepted Answer · 2016-09-24 07:52:41

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

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

автор: ajcw · Accepted Answer · 2013-09-25 13:04:08

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

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

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

автор: Konst_ · Accepted Answer · 2016-09-24 07:54:57

на Сасс потребители:

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

автор: Love Trivedi · Accepted Answer · 2016-09-12 08:08:56

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

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

автор: Dionysios Arvanitis · Accepted Answer · 2016-09-24 07:48:14

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

автор: Kristian · Accepted Answer · 2014-01-02 23:27:05

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

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

фото: Дэвид Уолш

автор: user3790069 · Accepted Answer · 2015-08-12 03:11:39

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

автор: hitautodestruct · Accepted Answer · 2017-02-13 08:19:53

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

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

пример:

input::placeholder { color: black; }

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

автор: Burak Tokak · Accepted Answer · 2016-09-24 07:56:21

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

автор: Dragos Rizescu · Accepted Answer · 2016-09-24 07:50:27

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

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

автор: Alias Varghese · Accepted Answer · 2016-09-24 07:57:58

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

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

автор: gfaceless · Accepted Answer · 2016-09-24 07:53:37

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

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

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

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

автор: user1729061 · Accepted Answer · 2013-02-16 02:53:58

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

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

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

автор: steady_daddy · Accepted Answer · 2016-09-24 08:01:43

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

Если вы пытаетесь изменить заполнитель внутри .форма контроля 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;
}

автор: BANTIMATHUR · Accepted Answer · 2017-08-30 18:18:11

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

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

автор: aviram83 · Accepted Answer · 2016-09-24 07:58:47

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

-webkit-text-fill-color: red;

что сделало трюк.

автор: trungk18 · Accepted Answer · 2016-10-04 07:50:11

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

автор: Mahendra Kulkarni · Accepted Answer · 2016-05-31 09:21:03

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

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

автор: Alireza · Accepted Answer · 2017-05-11 12:41:30

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

автор: Md. Abu Sayed · Accepted Answer · 2017-10-13 06:47:35

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

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

автор: Cryptopat · Accepted Answer · 2018-04-11 15:42:41

добавление фактической очень приятной и простой возможности: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" />

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

From: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

автор: Deepak Kumar · Accepted Answer · 2017-12-21 08:10:43

вы можете изменить цвет заполнителя ввода 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!">

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

автор: fraweb · Accepted Answer · 2018-05-13 15:19:23

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

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

автор: bendav91 · Accepted Answer · 2016-09-20 12:37:05

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

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

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

и в SCSS с помощью компаса:

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

см. документы для миксина заполнителя ввода.

автор: Anand · Accepted Answer · 2017-09-22 17:27:51

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

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

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

автор: SUNIL KUMAR E.U · Accepted Answer · 2017-10-18 09:43:51

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

автор: aphoe · Accepted Answer · 2017-10-23 17:59:12

попробуй такое

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