单击选项后如何将 CSS 样式应用于选择框？答案

【问题标题】：How to apply CSS style to select box after option is clicked?单击选项后如何将 CSS 样式应用于选择框？
【发布时间】：2020-12-11 08:56:11
【问题描述】：

我有一个 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;
        })
    }
}

【问题讨论】：

标签： javascript css

【解决方案1】：

你需要一个焦点风格：

<style>
    select.form-control:focus {
       color: #f0f0f0;
       border: none;
    }
</style>

【讨论】：