Seeky
Seeky

Reputation: 78

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

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.

HTML Select Element

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>

Upvotes: 3

Views: 11074

Answers (1)

Leo
Leo

Reputation: 937

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>

Upvotes: 4

Related Questions