javascript - 选择框 CSS 和 HTML 的样式

问题描述

有人刚刚帮我删除了我的选择框的轮廓（来自我的第一个 bootstrap-django 项目）现在，我想请求您帮助更改选项框本身的边框颜色属性，它是蓝色的，我正在尝试使其变黄。另外，由于某种原因，当Select框具有默认值时，其边框为黄色，但是选择其中一个选项后，它会变得更暗，我希望它从开始中变得更黑。

这是我的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 张图片。

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

谢谢大家！

标签： javascripthtmlcssdjangobootstrap-4

这是您的较暗和发光问题的解决方案：

代码选择器类

  . 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;
}

虽然蓝色边框无法更改，因为它是由操作系统渲染的

你可以在这里看到

javascript - 选择框 CSS 和 HTML 的样式

问题描述

解决方案

推荐阅读