How can I style option hover background?

Question

I made select-option. But option:hover does not work. How can I fix it or what do you prefer? Style must be like this

My codes

 <select>
      <optgroup label="Yaşayış üçün">
        <option>Yeni tikili</option>
        <option>Köhnə tikili</option>
      </optgroup>
      <optgroup label="Ticarət obyekti">
        <option>Yeni tikili</option>
        <option>Köhnə tikili</option>
      </optgroup>
    </select>

My styles Css

select {
  height: 48px;
  border: 1px solid #cbd5e1;
  box-sizing: border-box;
  border-radius: 8px;
  margin-top: 8px;
  padding: 12px 16px;
}

optgroup {
  padding: 16px;
  background: #f1f5f9;
}

option {
  background-color: white;
}

option:hover {
  background: #dbeafe;
}

Styling for those base elements is very limited. Anything you put in CSS is going to be ignored by the browser. You would need to build your own select menu using custom js and css classes and either integrate them with the and
@AStombaugh I used w3school codes. But another problem is that optgroup does not work — Rahil Ali, Apr 21 '22 at 17:47
If you read the entirety of the link I posted you can find that adding `

score 1 · Answer 1 · answered Apr 21 '22 at 17:42

You can turn a ul into a drop-down menu and further style it that way. See example below:

Source: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>

score 0 · Answer 2 · answered Apr 21 '22 at 18:59

0

You can't do this, because select is an system element. So use a HTML and CSS dropdown. You can style this.

answered Apr 21 '22 at 18:59

How can I style option hover background?

2 Answers2