HTML ввод CSS цвет фона не применяется

Question

У меня странное поведение CSS на элементах input[type=number], из-за которого набор background-color не применяется. Стиль color применяется к тексту ввода правильно, а инструменты разработчика Chrome показывают цвет фона как активный для элемента, но фактическое значение ввода отображается с другим цветом фона (светло-серый и не черный # 000 как показано).

Кто-нибудь сталкивался с таким поведением? Существуют ли другие CSS свойства, которые могут быть причиной этого?

Любые предложения или решения для этого очень ценятся. Заранее спасибо!

Answer 1

В дополнение ко всему вышеперечисленному.

1. В вашей консоли переключите вкладку Стили на Computed , и вы увидите все свойства, которые могут иметь влияние на ваш input.
2. Этот странный серый цвет #e8e8e8 или rgb(232,232,232). попытайтесь найти его в ваших css файлах.
3. В вас множество классов input. Попробуйте удалить их один за другим в консоли и посмотрите, что произойдет.

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

input {
    text-shadow: none !important;
}

Answer 2

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

И о том, что цвет фона не применяется; на самом деле он применяется, как я вижу: ширина ввода составляет 50px в соответствии с css, и я вижу в инспекторе его ширину 50px, поэтому черный цвет вокруг значения - это цвет фона, как вы его установили. Только значение имеет серый цвет вокруг него. И: так как установка background-color! Важный переопределяет сам фоновый цвет, он НЕ переопределяет ВСЕ свойства фона (если, например, где-то еще было объявлено фоновое ИЗОБРАЖЕНИЕ, оно не будет переопределено)

, список возможных объяснений:

• Можно установить фоновое изображение.
• Серый фон может быть фоном, предварительно заполненным браузером, который появляется, когда вводимое значение автоматически заполняется из сохраненной памяти. Например, Chrome устанавливает фон, который обычно является желтым (но может быть серым в вашем случае). Вы можете попытаться выяснить, так ли это с:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

• Вход может где-то иметь all: unset, который переопределяет другие css объявления
• A Расширение браузера может испортить ваш html / css. Откройте страницу на анонимной вкладке (для которой обычно отключены расширения).
• Может быть установлен набор псевдо-селектора css ::, который меняет цвет, прокрутите вниз в инспекторе элементов, чтобы увидеть его. Они обычно внизу. такой как input :: valid

Answer 3

Я думаю, что вы столкнулись с этой проблемой, потому что автозаполнение css свойство
, которое привело мое значение по умолчанию через css. Если вы хотите переопределить его, используйте этот код:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: red !important;
}

вы можете изменить цвет фона, как вы хотите, заменив «белый» в первой строке, вы можете изменить цвет текста, как вы хотите, заменив «красный»

Answer 4

Если вы используете Angular и изменения стиля в HTML или CSS не видны, примените следующий подход:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ... 
    encapsulation: ViewEncapsulation.None
})

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

Answer 5

У вас есть много классов для этого конкретного элемента, возможно, один из них вызывает его ненормальное поведение, я не могу сказать, что, не увидев файл CSS, я бы посоветовал вам попробовать присваивая элементу ввода идентификатор, чтобы увидеть, что происходит, поскольку он имеет более высокий порядок рендеринга страницы. Это все, о чем я могу думать сейчас.

Answer 6

Попытайтесь быть более точным c с помощью селектора. Попробуйте идентификатор, чтобы установить цвет. Однажды я столкнулся с той же проблемой. Решил это, уточнив c.

Answer 7

Почему бы вам не попробовать alert класс для цвета фона тега input . Они действительно хорошо выглядят для тегов input . Даже однажды у меня возникла эта проблема с использованием alert класс работал хорошо для меня.