Как применить стиль CSS для выбора поля после выбора опции?

У меня есть 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;
        })
    }
}