У меня проблема с одним элементом на моем сайте, который остается черным.
Я думаю, что у него нет собственного класса CSS.
Вот код:
$search_output .= '<input type="text" placeholder="'.__("Search", "swiftframework").'" name="s" autocomplete="off" /></form><div class="ajax-search-results"></div></div>'. "\n";
$search_output .= '</li>'. "\n";
Чтобы изменить цвет текста заполнителя, вы можете добавить класс для ввода и применить эти стили к этому классу, например class="white-input"
.white-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
opacity: 1; /* Firefox */
}
.white-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: white;
}
.white-input::-ms-input-placeholder { /* Microsoft Edge */
color: white;
}
Дополнительный код для совместимости браузера.
Если вы хотите изменить цвет заполнителя для каждого ввода, вы можете использовать их без области видимости:
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: white;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
Для получения более подробной информации посетите https://www.w3schools.com/howto/howto_css_placeholder.asp
Пожалуйста, добавьте этот CSS:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder { /* IE 10+ */
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
<input type="text" placeholder="Search" />
Вы можете заменить красный, какой цветовой код вам нужен.
В большинстве браузеров текст-заполнитель серый. Чтобы изменить это, создайте стиль заполнителя с нестандартным селектором :: placeholder. Обратите внимание, что Firefox добавляет меньшую непрозрачность для заполнителя, поэтому мы используем opacity: 1, чтобы исправить это.
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
<input type="text" placeholder="Search" />