#html #css #ninja-forms
#HTML #css — файл #формы ниндзя #css #ninja-forms
Вопрос:
Я пытаюсь придать элементу Select прозрачный фон, и во время устранения неполадок логика завела меня по кругу.
Мы используем Divi в качестве нашей темы WP. Мы используем Ninja Forms в качестве нашего плагина forms.
На данный момент в этом сочетании два поля: обычный ввод текста и поле выбора.
Мы применили пользовательский класс к каждому из этих полей.
Мы применили следующую директиву к этому классу:
.header_form_select {
background: transparent !important;
}
Вот где устранение неполадок шло по кругу. Когда мы тестируем это расположение, мы обнаруживаем, что вводимый текст принимает стиль и действительно прозрачен. Выбор, не так много. Если мы переместим элемент select field за пределы его родительского элемента, стиль повлияет на него. Значит, что-то должно его перезаписывать, верно?
Однако, если мы оставим его внутри родительского элемента (как задумано) и сделаем фон красным, а не прозрачным, все будет работать так, как ожидалось. Похоже, проблема конкретно в прозрачности И элементе select (поскольку он отлично работает с вводом текста)…
Кажется, я не могу найти никакой информации о том, почему это было бы странностью вокруг элементов select, и в то же время трудно поверить, что это корень проблемы, поскольку, если мы просто переместим его за пределы этого родительского элемента, это сработает…
Любая помощь в распутывании этого беспорядка была бы супер замечательной. 🙂 Спасибо всем.
Комментарии:
1. Попробуйте создать стиль select, чтобы делать что-либо на Mac…
2. просто дикая идея, можете ли вы попробовать ввести select и ID, а затем настроить таргетинг на него подобным образом, потому что ID имеет большую специфичность, чем class в CSS. также может быть полезен снимок экрана инструментов разработки с элементом и всеми стилями: D
Ответ №1:
В 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);
}
РЕДАКТИРОВАТЬ: отредактировано для наглядности (я надеюсь)
Ответ №2:
!important это довольно агрессивный способ переопределения стилей, но если даже этого недостаточно для переопределения, то обычно это связано с тем, что тема / плагин использует еще более специфичный селектор для изменения фона select с помощью !important тега.
Это может выглядеть примерно так;
.parent select.elementclass {
background: #ffffff !important;
}
Вам придется использовать такой же или более специфичный селектор, чем переопределяющий стиль. Если вы запустите ‘inspect element’ для элемента select, вы можете найти то, что переопределяет свойство background, и скопировать этот селектор в свою таблицу стилей. Этого должно быть достаточно для переопределения, поскольку пользовательские таблицы стилей загружаются после стилей темы. Если нет, просто измените его, чтобы он был более конкретным, например, используйте идентификатор для элемента select.