Вопросы Теги

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

Я решил это с установкой «Конвейер по Keyoti» в Visual Studio Professional 2015. Конвейер создает REMOTE-адрес (ваш IP) с портом (45455), который разрешает внешний запрос. Пример:

Конвейер позволяет тестировать веб-приложения с внешних планшетов и телефонов в вашей сети или с эмуляторов Android (без http://10.0.2.2:)

Шаги находятся в следующей ссылке:

https://marketplace.visualstudio.com/items?itemName=vs-publisher-1448185.ConveyorbyKeyoti

3840
задан 25 revs, 19 users 20% 31 January 2018 в 10:30
поделиться

3 ответа

Реализация

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

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

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

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

Селекторы CSS

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

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

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

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 - 18 */ color: #909; непрозрачность: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; непрозрачность: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #909; } ::placeholder { /* Большинство современных браузеров поддерживают это сейчас. */ color: #909; }

Замечания по использованию

  • Будьте осторожны, чтобы избежать плохого контраста. В Firefox по умолчанию используется уменьшенная непрозрачность, поэтому здесь нужно использовать opacity: 1.
  • Обратите внимание, что текст заполнителя просто обрезается, если он не помещается - измерьте размеры элементов ввода в em и протестируйте их с большими настройками минимального размера шрифта. Не забывайте о переводах: некоторым языкам нужно больше места для одного и того же слова.
  • Браузеры с поддержкой HTML для placeholder, но без поддержки CSS для этого (например, Opera) тоже должны быть протестированы.
  • Некоторые браузеры используют дополнительные CSS по умолчанию для некоторых типов input (email, search). Они могут повлиять на рендеринг неожиданным образом. Используйте свойства -webkit-appearance и -moz-appearance, чтобы изменить это. Example:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
4753
ответ дан 17 December 2019 в 16:00
поделиться

Вот решение с [1 115] селекторы 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, Мигание (Safari, Google Chrome, Opera 15 +) и , Microsoft Edge использует псевдоэлемент:
    ::-webkit-input-placeholder.
  • Mozilla Firefox 4 to 18 использует псевдокласс:
    :-moz-placeholder (одно двоеточие).
    Mozilla Firefox 19 + использует псевдоэлемент:
    ::-moz-placeholder, но старый селектор будет все еще работать некоторое время.
  • Internet Explorer 10 и 11 используют псевдокласс:
    :-ms-input-placeholder.
  • Internet Explorer 9 и ниже не поддерживает атрибут заполнителя вообще, в то время как Opera 12 и ниже не поддерживает селектора CSS для заполнителей.
0
ответ дан Mohammad Ayoub Khan 14 September 2019 в 15:51
поделиться
  • 1
    можно ли объяснить немного, что делает каждый из тех делает? – Akshat Agarwal 29 October 2013 в 20:28

::-webkit-input-placeholder {/* Край */цвет: #colorcode;}

:-ms-input-placeholder {/* Internet Explorer */цвет: #colorcode;}

:: заполнитель {цвет: #colorcode;}

использование это в CSS и заполнителе окрашивает изменения.

0
ответ дан 17 December 2019 в 16:00
поделиться