After spending several days scouring the internet and trying out numerous methods, I have yet to find a satisfying way to create my own dropdown list.
Using CSS, I am able to customize the text color (A), the border style and color (B) of the dropdown field, as well as the background color (C).
However, I am disappointed to discover that there are seemingly no CSS properties available for customizing the selection border color (D), the selection color itself (E), and the style and color of the dropdown selection border (F).
It's hard to believe, but despite my efforts, I have not come across any CSS properties that would cater to my needs.
A definitive answer confirming that it is indeed impossible would bring my search to an end. Alternatively, if the CSS properties I desire do exist, that would be even better.
https://i.sstatic.net/kKJ5u.gif
Below is the code I have been working with:
<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>