选择框 CSS 和 HTML 的样式答案

【问题标题】：Style for a selectbox CSS and HTML选择框 CSS 和 HTML 的样式
【发布时间】：2020-07-16 07:40:42
【问题描述】：

有人刚刚帮我删除了我的选择框的轮廓（来自我的第一个 bootstrap-django 项目）现在，我想请求您帮助更改选项框本身的边框颜色属性，它是蓝色的，我正在尝试将其设置为黄色。 Also, for some reason when the select box has the default value, its border is yellow but after you select one of the options, it becomes darker, and i would like it to be darker from the beggining.

这是我的 CSS：

.selector{
    outline:none;
    position:absolute;
    border-radius:1rem;
    margin-left:260px;
    width:500px;
    border-color: #C9C9C9;
    height:35px;
    font-size: 15px;
    text-align-last: center;
    color:#C9C9C9;
}

.selector:focus{
    border-color:#FFD700;
    box-shadow: 0 0 8px #FFD700;
}

还有我的 HTML：

<div class="div1">
  <label for="estado" class="label1">
    Estado
    <select class="selector" id="estado" name="estado" onchange="functionfs()" style="border-color: #C9C9C9; ">
      <option style="color:black" selected="selected" value="-----">--- Ingrese un valor ---</option>
      <option value="Activo" style="color:black;">Activo</option>
      <option value="Inactivo" style="color:black;">Inactivo</option>
    </select>
  </label>
</div>

还有我的 JS：

<script type="text/javascript">
  var selector = document.getElementById("estado");
  function functionfs(valor) {
    selector.setAttribute("style", "color:black;");
  }
</script>

我还会附上问题本身的 2 张图片。

如您所见，当我选择两种状态之一并再次单击它时，它会变暗。

谢谢大家！

【问题讨论】：

你不能用默认的select标签来做到这一点
对于文本，将 color:#C9C9C9; 更改为 color: black。在下拉列表中，我不确定您是否可以在不更改整个元素的情况下更改边框颜色。

标签： javascript html css django bootstrap-4

【解决方案1】：

这里是你的黑暗和发光问题的解决方案：

代码选择器类

  . selector {
    outline: none;
    position: absolute;
    border-radius: 1rem;
    margin-left: 260px;
    width: 500px;
    height: 35px;
    font-size: 15px;
    text-align-last: center;
    color: #000000;
    border-color: #FFD700 !important;
    box-shadow: 0 0 8px #FFD700;
}

虽然蓝色边框是操作系统渲染的，所以不能更改

You can see here

【讨论】：