Питання Змінити колір заповнювача в HTML5 з CSS


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

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

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

Value все одно залишиться grey замість red.

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


3600
2018-04-09 20:36


походження


Швидкий гольф-ап (не рішення, просто FYI): якщо я нагадую правильно, вхід [placeholder] точно відповідає тегам <input>, які мають атрибут заповнювача, він не збігається з самим атрибутом заповнювача. - pinkgothic
Я думав, що це може схоже на те, що намагається натхнути атрибут "title" елемента. Так що +1 для думки! - David Murdoch
@MathiasBynens Псевдокласс, показаний замість заповнювача, відповідає елементу вводу, який показує такий текст заповнювача. Тож він відповідає <input> тег, як input селектор, але показує текст заповнювача тільки зараз. Він також не відповідає атрибуту заповнювача. - HEX
@HEX Це не схоже на input селектор, тому що вибирає все input елементи :placeholder-shown тільки вибирає input елементи, які в даний час показують заповнювач, дозволяючи стирати лише ці елементи, а також ефективно стильувати текст заповнювача. Що ви намагаєтеся сказати? - Mathias Bynens
@HEX (Звичайно, він також обраний textarea елементи, які показують текст замість заповнювача.) - Mathias Bynens


Відповіді:


Реалізація

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

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

Internet Explorer 9 та новіші не підтримує placeholder атрибут взагалі, в той час як 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;
    }

4531
2018-06-06 08:47



Зауважте також, що, хоча Webkit вважає, що це має досить сильну специфіку, Mozilla це не робить. Вам, мабуть, доведеться попапити декілька важливих людей, щоб з'являтися речі. - dmnc
@ toscho: дякую за чудову відповідь Я просто потребував трохи демонстрації про це "живим", тому ваш приклад може бути також досягнутий тут: jsfiddle.net/Sk8erPeter/KyVXK. Знову дякую. - Sk8erPeter
Заповнювач Firefox, як видається, не виконує функції за замовчуванням із зменшеною непрозорістю. Для когось іншого важко освіжаючого та дивлюся чому heck це не з'являється працювати ("чому мій білий текст все ще сірий .."), використовуйте opacity: 1 - jwinn
У IE10 *:-ms-input-placeholder і :-ms-input-placeholder сам по собі не працює, але INPUT:-ms-input-placeholder робить Непарний - Jared
Примітка для Bootstrap 3: клас "form-control" перевизначає колір за специфікою CSS (тобто "form-control :: - webkit-input-placeholder"), тому ви повинні бути як мінімум конкретними або використовувати "! Важливо" у вашому CSS (це було пекло для налагодження, оскільки ні Firebug, ні Devtools, здається, не показують цей псевдо-клас) - Costa


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

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


656
2018-02-09 16:44



Документ MSDN, до якого ви зв'язали, стверджує, що його підтримують лише в Internet Explorer 10. Ще добре знайти, але не дуже корисно, поки користувальницька база IE10 стане значною (можливо, ми розглянемо часові рамки років). - danishgoel
Реально, ви хочете, щоб стиль заповнювачів на сайті рівномірно, а не стиль кожного окремого введення за ідентифікатором. - BadHorsie
Після FF19 вам слід використовувати :: - moz-placeholder - viplezer
Потрібно поставити цей CSS в нижній частині таблиці стилів, якщо ви також застосуєте клас на вході, щоб він працював на IE (11). Дивіться цю вилку на JSFiddle jsfiddle.net/9kkef. Відкрийте сторінку як в IE, так і в іншому веб-переглядачі, в IE ви побачите, що текст заповнювача буде в колі прикладного класу. - Timo002


Можливо, вам також доведеться стильувати текстові поля:

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

260
2017-09-14 12:52



на друк в chrome не працює ... будь-яка допомога @media print {input [type = text] .form-control :: - webkit-input-placeholder, input [type = textarea] .form-control :: - webkit -інструмент-заповнювач {колір: #FFFFFF; }} - Mahdi Alkhatib


Для Завантажувач і Менше Користувачі, є mixin .placeholder:

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

96
2018-02-14 21:11



Або, навіть простіше, відредагуйте змінну @input-color-placeholder - зазвичай знайдений в змінні.необхідно - William
@William було б не легше визначити сам селектор і використовувати міксін, щоб уникнути необхідності повертатися та змінювати його, якщо ви хочете, щоб інший заповнювач вводу інший колір? - Brandito
@Brandito - це звучить як краєвий випадок - зазвичай колір-заповнювач однаковий для всіх елементів форми в дизайні. - William
@William Вибач, я страшний у формулюванні цього матеріалу сорту, я думав, що буде краще використовувати mixin з аргументом вхідного кольору ви хочете, хоча цілком чесно кажучи, я, ймовірно, думаю про краю випадків, я ' М використовується (стильовано заповнювач вхідного пошуку, де він знаходиться на кольоровому фоні: P) так вибачте, але ви маєте рацію, вибачте. - Brandito
@Брандіто все добре. Є завжди краю випадків. - William


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

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

Повне порівняння між браузерами тут.


92
2018-04-14 02:28





Для Сасс користувачі:

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

68
2018-06-25 09:01



Більш гнучкий спосіб - використовувати @content; - milkovsky


Це буде добре. ДЕМО З ТЕМ:

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


51
2017-10-08 19:21



Я повинен був додати! Важливо також у Firefox v56 - Savage


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

43