Проблема со стилем элемента Select для прозрачного фона

Я пытаюсь стилизовать элемент Select так, чтобы он имел прозрачный фон, и во время устранения неполадок логика запускала меня по кругу.

Мы используем Divi в качестве нашей темы WP. Мы используем Ninja Forms в качестве плагина для форм.

На данный момент в этом миксе два поля: обычный текстовый ввод и поле выбора.

Мы применили собственный класс к каждому из этих полей.

Мы применили к этому классу следующую директиву:

.header_form_select {
    background: transparent !important;
  }

Вот где устранение неполадок пошло по кругу. Когда мы тестируем это расположение, мы обнаруживаем, что текстовый ввод принимает стиль и действительно прозрачен. Выбор, не очень. Если мы переместим элемент поля выбора за пределы его родительского элемента, стиль ДЕЙСТВИТЕЛЬНО повлияет на него. Значит, что-то должно перезаписывать его, верно?

Однако, если мы сохраним его внутри родительского элемента (как задумано) и сделаем фон красным, а не прозрачным, он будет работать, как и ожидалось. Кажется, проблема именно с прозрачностью И элементом выбора (поскольку он отлично работает с вводом текста)...

Кажется, я не могу найти никакой информации о том, почему это может быть причудой вокруг элементов select, и в то же время трудно поверить, что это корень проблемы, поскольку, если мы просто переместим его за пределы этого родительского элемента, он ДЕЙСТВИТЕЛЬНО работает. ..

Любая помощь в распутывании этого беспорядка была бы супер здоровой. :) Всем спасибо.


html css ninja-forms
person Allen Trevethan    schedule 14.03.2019    source источник
comment
Попробуйте стилизовать выбор, чтобы сделать что-нибудь на Mac...   -  person Adam    schedule 14.03.2019
comment
просто дикая идея, можете ли вы попробовать ввести select и ID, а затем настроить его таким образом, потому что ID имеет большую специфичность, чем класс в CSS. также может быть полезен снимок экрана инструментов разработчика с элементом и всеми стилями: D   -  person fila90    schedule 14.03.2019

Ответы (2)


arrow_upward
0
arrow_downward

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

Это называется наследованием.

В вашем случае я подозреваю, что элемент select наследует стили от родителя, когда вы используете transparent, потому что это значение по умолчанию для background-color.

.parent {
  background-color: blue; //explicitly-set value on parent
}

.child {
.background-color: transparent //default value; will be overridden by parent
.background-color: red //explicitly-set value, will NOT be overidden by parent
}

Если поддержка браузера не является препятствием, вы можете использовать нативную функцию CSS rgba() для явно установить дочерний элемент прозрачным.

.child {
  background-color: rgba(0, 0, 0, 0);
}

РЕДАКТИРОВАТЬ: отредактировано для ясности (надеюсь)

person A. Lamansky    schedule 14.03.2019

arrow_upward
0
arrow_downward

!important — довольно агрессивный способ переопределения стилей, но если даже этого недостаточно для переопределения, то обычно это происходит потому, что тема/плагин использует еще более конкретный селектор для изменения фона выбора с помощью тега !important.

Это может выглядеть примерно так;

.parent select.elementclass {
  background: #ffffff !important;
}

Вам придется использовать такой же или более конкретный селектор, чем переопределяющий стиль. Если вы запустите «проверить элемент» для выбранного элемента, вы можете найти то, что переопределяет свойство фона, и скопировать этот селектор в свою таблицу стилей. Этого должно быть достаточно, чтобы переопределить, так как пользовательские таблицы стилей загружаются после стилей темы. Если не просто настроить его, чтобы быть более конкретным, например. используйте идентификатор для выбранного элемента.

person Jasmine    schedule 14.03.2019