如何为HTML的“select”元素中的选项添加样式？

Question

如何为HTML的“select”元素中的选项添加样式？

364

这是我的HTML：

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

我想使用CSS将产品名称（例如“Product1”，“Product2”等）加粗，并将其类别（即电子产品，运动等）斜体化。我发现一个旧问题提到无法使用HTML和CSS实现，但希望现在有解决方案。

- MrClan

不确定这个。但我想不行。你需要一些 JavaScript（jQuery）的魔法才能实现。 - Madara's Ghost

9

选项的样式仍然像以前一样令人讨厌。你可能想要使用的是optgroup：http://htmlhelp.com/reference/html40/forms/optgroup.html这将给你一个加粗和斜体的类别（比如电子产品），在该类别下会有一堆选项。 - wolv2012

1

最佳解决方案 => https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select - mehmet

我最终使用了Bootstrap的下拉菜单功能：https://getbootstrap.com/docs/5.2/components/dropdowns/ - xhafan

23个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sabir Nawaz · Answer 1

(() => {
        const optionValues = document.querySelectorAll(".search-form__value");
        const searchOptions = document.querySelector(".search-form__selector");
        const dropdown = document.querySelector(".search-form__dropdown");
        const input = document.getElementById("search-form-loc");
        const selectorText = document.querySelector(".search-form__label--loc");

        searchOptions.addEventListener("click", function () {
          dropdownHandler();
        });

        optionValues.forEach((option) => {
          option.addEventListener("click", function () {
            updateUI(input, selectorText, this);
          });
        });

        window.addEventListener("mouseup", function (event) {
          if (event.target != dropdown) {
            dropdown.classList.remove("search-form__dropdown--show");
          }
        });

        function dropdownHandler() {
          dropdown.classList.toggle("search-form__dropdown--show");
        }

        function updateUI(input, selectorText, referedThis) {
          input.value = referedThis.textContent.trim();
          selectorText.textContent = referedThis.textContent.trim();
          dropdown.classList.remove("search-form__dropdown--show");
        }
      })();

/* CSS Reset Starts */

  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family:  sans-serif;
    color: #777;
    background-color: slateblue !important;
  }
  /* CSS Reset Ends */

  .search-form {
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 700px;
    margin: 100px auto;

    background: #fff;
  }

  .search-form__label {
    margin-right: 40px;
  }

  .search-form__selector {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    padding: 12px 18px;
    background: #fff;

    position: relative;
    z-index: 1000;
  }

  .search-form__line {
    height: 100%;
    width: 1px;
    background: #777;
    margin-left: auto;
  }

  .search-form__icon {
    font-size: 24px;
  }

  /* Dropdown */
  .search-form__dropdown {
    list-style: none;
    position: absolute;
    left: 0;
    top: 100%;
    box-shadow: 0 7px 30px -10px #96aa6480;
    width: 100%;
    min-width: max-content;
    transition: 0.4s;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    pointer-events: none;
    transform: translateY(20px);
    cursor: pointer;
  }

  .search-form__value {
    padding: 7px;
  }

  .search-form__value:hover {
    background: #0667d5;
    color: #fff;
  }

  .pos-rel {
    position: relative;
  }

  .search-form__dropdown--show {
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <form class="search-form">
      <input type="hidden" name="search-form-loc" id="search-form-loc" />
      <div class="pos-rel">
        <div class="search-form__selector">
          <p class="search-form__label search-form__label--loc">Select From List</p>
          <div class="search-form__line">&nbsp;</div>
          <i class="fa fa-caret-down search-form__icon"></i>
        </div>
        <ul class="search-form__dropdown">
          <li class="search-form__value" data-loc="search-form-loc">UK</li>
          <li class="search-form__value" data-loc="search-form-loc">Barcelona</li>
          <li class="search-form__value" data-loc="search-form-loc">Brazil</li>
          <li class="search-form__value" data-loc="search-form-loc">Hungary</li>
        </ul>
      </div>
    </form>
  </body>
</html>

enter image description here

- Abhiman Ranaweera · Answer 2

这是可以使用CSS实现的，非常棘手！！！实际上这是一种黑客技巧。您必须在下拉选项中添加以下3个内容：

onfocus="this.size=2;"
onblur="this.size=0;"
onchange="this.size=1;this.blur()"

HTML 代码

<select onfocus="this.size=3;" onblur="this.size=0;" onchange="this.size=1; this.blur()"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

就是这样！现在你可以像往常一样给 CSS 添加样式。如果你想要使用类和样式，请自行添加。这里我只演示不使用类的情况。 CSS 代码

      .option: nth-child(1){
background-color: red;
font-style: italic;
}
      .option: nth-child(2){
background-color: blue;
}

- Ayan Khan · Answer 3

如果您不想涉及JavaScript，请尝试这个：

select {
  margin-top: 2% !important;
  font-size: 19px !important;
  text-align: center !important;
  width: 25% !important;
  padding: 6px 12px !important;
}
option {
  min-height: 1.5rem !important;
  padding: 14px !important;
}