个人中心
gpt4 book ai didi

html - 选中和选中时更改下拉菜单的背景颜色

转载 作者：太空宇宙 更新时间：2023-11-04 08:49:44 24 4
gpt4 key购买 nike

在我的表单中，我有多个字段、2 个输入框和一个下拉列表。当我按下 Tab 键时，我会移动到下一个字段，直到到达下拉菜单。当我的选项卡索引到达下拉菜单时，我希望它是黄色的，但只要我点击下拉菜单，它就会变成白色背景。我该怎么做？

select:focus{
  background-color: yellow;
  color: black;
}

select:hover{
  background-color: white;
}
<!DOCTYPE html>
<html>

<body>

First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>
</html>

enter image description here

最佳答案

您需要一些简单的 JavaScript 来完成此操作，但这应该可以帮助您入门:

CSS 

    .form-row {
      padding: 8px;
    }

    /* when the select is focused, change the bg color */
    select:focus {
      background: yellow
    }

演示标记:

    <div class="form-row">
      <label for="text">
        Write Something:
      </label>
      <input type="text" id="text">
    </div>

    <div class="form-row">
      <label for="select">
        Choose Something:
      </label>

      <select id="select">
        <option>
          opt 1
        </option>
        <option>
          opt 2
        </option>
        <option>
          opt 3
        </option>
      </select>
    </div>

JavaScript

    <script>
      // since clicking a select also focuses it, we need to undo
      // the focus style. here i'm adding an inline style to do this
      // but you could add a class that overwrites the focus style instead
      document.getElementById('select').addEventListener('click', function () {
        this.style.background = '#fff'
      });

      // we want to be able to get the yellow focus again
      // if we leave the select box, but re-focus it again
      // so remove the inline style on blur
      document.getElementById('select').addEventListener('blur', function () {
        this.removeAttribute('style');
      });
    </script>

关于html - 选中和选中时更改下拉菜单的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43531520/

24 4 0
文章推荐： c - 学习链表 C
文章推荐： python - 将所有模块导入一个文件夹中，并通过其属性之一使用它们
文章推荐： 在 Windows 的 Xcode 中编译(控制台)
文章推荐： python - 在 Python 3 中替换字符串中的 unicode 字符
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com