Змініть колір заповнення вводу HTML5 за допомогою CSS

Chrome підтримує атрибут заміщає на input[type=text]елементи (інші , ймовірно , робити теж).

Але наведене нижче CSSнічого не робить для значення заповнювача:

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

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

Valueзалишиться greyзамість цього red.

Чи є спосіб змінити колір заповнення тексту?

Впровадження

Існує три різні реалізації: псевдоелементи, псевдокласи і нічого.

• 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-селектор для заповнювачів.

Дискусія щодо найкращого впровадження ще триває. Зауважте, що псевдоелементи діють як реальні елементи в тіні DOM . А 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;
    }

/* 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заповнювачів.

Важлива примітка. Не групуйте ці правила. Натомість зробіть окреме правило для кожного селектора (один недійсний селектор у групі робить всю групу недійсною).

Ви також можете захотіти стилі текстарії:

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

Для Bootstrap і менших користувачів існує мікс .placeholder:

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

На додаток до відповіді Toscho, я помітив деякі невідповідності веб-веб-сайтів між Chrome 9-10 та Safari 5 з підтримуваними властивостями CSS, які варто зазначити.

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

Повне крос-браузерне порівняння тут .

Для користувачів 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);
}

Це буде добре працювати. ДЕМО ТУТ:

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

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

Рішення для крос-браузера:

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

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

Використовуйте нове, ::placeholderякщо ви використовуєте автопрефіксатор .

Зауважте, що .placeholder mixin від Bootstrap застаріло.

Приклад:

input::placeholder { color: black; }

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

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

Я просто усвідомлюю щось для 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;
}

Я перезаписую на opacity1, так що буде добре.

Я не пам'ятаю, де я знайшов цей фрагмент коду в Інтернеті (він не був написаний мною, не пам'ятаю, де я його знайшов, ні хто його написав).

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

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

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

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

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

Або якщо ви використовуєте Менше :

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

Якщо ви використовуєте 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;
}

Цей короткий і чистий код:

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

Як щодо цього

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

Немає CSS або заповнювача, але ви отримуєте однаковий функціонал.

Я спробував кожну комбінацію, щоб змінити колір на своїй мобільній платформі, і, зрештою, це було:

-webkit-text-fill-color: red;

яка зробила трюк.

Для користувача 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;
}

спробуйте цей код для різних вхідних елементів різного стилю

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

Ось ще один приклад:

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

Додавання фактично дуже приємної та простої можливості: 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

Гаразд, заповнювачі розміщення поводяться по-різному в різних браузерах, тому вам потрібно використовувати префікс браузера у вашому 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;
}

Ви можете змінити колір заповнення вводу 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!">

Сподіваюсь, це допоможе.

Ви можете використовувати це для стилю введення та фокусування:

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

Найпростішим способом було б:

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

Компас має міксин для цього поза коробкою.

Візьміть свій приклад:

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

А в SCSS за допомогою компаса:

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

Див. Документи щодо мікстура для введення даних.

Ось рішення з 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-заповнювач (одна двокрапка).
  Mozilla Firefox 19+ використовує псевдоелемент:
  :: - moz-placeholder, але старий селектор ще працюватиме деякий час.
• Internet Explorer 10 і 11 використовують псевдоклас:
  :: -ms-input-placeholder.
• Internet Explorer 9 і новіші версії взагалі не підтримують атрибут placeholder, тоді як Opera 12 і новіші не підтримують жоден CSS-селектор для заповнювачів.

Частина HTML:

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

Я покажу, як змінити колір вираження "Ввести речення" за допомогою CSS:

  ::placeholder{
  color:blue;
   }