Reputation: 78
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>
Upvotes: 3
Views: 11074
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