CSS properties to customize dropdown list (HTML select element) wanted

Question

For several days now I've been searching the web and I've tested countless approaches to create an own dropdown list. But I'm not satisfied with any approach.

With CSS I can configure the color of the text (A), the style and color of the border (B) of the dropdown field and the color of the background (C). But are there really no CSS properties for the color of the selection border (D), the color of the selection itself (E) and the style and color of the dropdown selection border (F)?

I can't believe this, but on the other hand, I haven't been able to find any CSS properties that would allow this.

A clarifying answer, that this is really not possible, would end my search and if the CSS properties I'm looking for do exist, that would even be better.

And here's my code:

<html>
  <head>
    <style type = "text/css">
      select {
        color:            #ffffff;
        background-color: #ff8800;
        border-width:     3px;
        border-color:     #ff0000;
      }
    </style>
  </head>
  <body>
    <select>
      <option value = "">[Select an option]
      <option value = "1">Option 1
      <option value = "2">Option 2
      <option value = "3">Option 3
      <option value = "4">Option 4
      <option value = "5">Option 5
    </select>
  </body>
</html>

Leo · Accepted Answer · 2021-03-10 07:15:03Z

4

At the moment, no, we can't set these D, E and F of a select element.

The only things you are missing (which doesn't even solve your problem), are the selected option and options background (different from select background).

select {
  /* C */
  background-color: #ff8800;
}
option {
  background-color: yellow;
}
option:checked {  
  background-color: green;
}

<select>
  <option value="">[Select an option]</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

edited Mar 10, 2021 at 7:15

answered Jun 26, 2020 at 16:31

Leo

96710 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Seeky Over a year ago

Thanks a lot for mentioning the additional options and the confirmation that we really can't configure 'D', 'E' and 'F', what I was afraid of. I really don't understand why we can't configure these basic things nowadays. But unfortunately, that really seems to be the case.

Collectives™ on Stack Overflow

CSS properties to customize dropdown list (HTML select element) wanted

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related