Comment styliser l'option d'un élément html "select" ?

Question

Voici mon HTML :

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

Je veux rendre le nom du produit (i.e. 'Product1', 'Product2', etc) en gras, et ses catégories (viz. Electronics, Sports, etc) en italique, en utilisant uniquement CSS. J'ai trouvé une ancienne question qui mentionnait que ce n'est pas possible en utilisant HTML et CSS, mais j'espère qu'il y a une solution maintenant.

Answer 1

Vous pouvez ajouter une classe et donner l'option font-weight:700 ;. Mais en utilisant ceci, tout le texte deviendra gras.

Answer 2

Il s'agit d'un code html css utilisé pour styliser la balise option et select. Option sélectionnée : background et bold Après la fermeture, le site apparaît en italique.

    <style>
        .mydropdown{
         border:none;
         border-bottom:2px dotted black;
         display:inline;max-width:20%;
         font-style: italic;
         font-weight: 600;
         cursor: pointer;  
    }
    .mydropdown:hover , .myoption:active , .myoption:checked{
         border:2px dotted green;
    }
    .myoption{
         font-style: normal;
    }
    .mydropdown .myoption:checked,
    .mydropdown .myoption:hover ,
    .mydropdown .myoption:active {
        font-style: italic;
        font-weight: 600;
     }
    </style>

Answer 3

(() => {
        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>