У меня есть HTML-форма, которую я пытаюсь создать с помощью Bootstrap и моих собственных правил CSS. Форма имеет шесть раскрывающихся (выборочных) элементов. Когда я загружаю форму, я хочу убедиться, что каждое раскрывающееся меню имеет определенный фон и цвет шрифта, который выглядит следующим образом:
Когда я нажимаю раскрывающееся меню, чтобы выбрать параметр, я хочу, чтобы цвет фона и цвет шрифта оставались прежними. Но мои CSS и JavaScript не вызывают этого. Вместо этого цвет шрифта темно-серый. Кроме того, вокруг раскрывающегося элемента появляется ярко-синий контур, который мне не нужен:
Я не получаю стиль, который хочу, в раскрывающемся списке, который я только что щелкнул, пока не нажму на следующий раскрывающийся список:
Как сделать так, чтобы раскрывающийся список выглядел так, как вы видите на третьем изображении, сразу после выбора параметра в раскрывающемся списке вместо того, чтобы ждать, пока я не нажму следующий раскрывающийся список? Кроме того, как мне избавиться от этого ярко-синего контура в то же время?
Вот раскрывающийся элемент:
<select name = "person_height" class = "form-control" id = "id_person_height"
style = "background: rgb(57,63,77);">
<option value selected>--------</option>
<option value = "2">Under 4'10"</option>
...
</select>
Вот CSS:
select.form-control {
color: $form-font-color; // Sass variable
}
Вот JavaScript:
// Global
var formBgColor = '#393f4d';
var formFontColor = '#f0f0f0';
function setFormFieldColors() {
var selectEls = document.getElementsByTagName('select');
for (var i = 0; i < selectEls.length; i++) {
selectEls[i].style.background = formBgColor;
selectEls[i].click(function () {
selectEls[i].style.backgroundColor = formBgColor;
selectEls[i].style.color = formFontColor;
})
}
}
Вам нужен стиль фокуса:
<style>
select.form-control:focus {
color: #f0f0f0;
border: none;
}
</style>