title: CSS properties to customize dropdown list (HTML select element) wanted
body: <p>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.</p>
  <p>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)?</p>
  <p>I can't believe this, but on the other hand, I haven't been able to find any CSS properties that would allow this.</p>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/kKJ5u.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kKJ5u.gif" alt="HTML Select Element" /></a></p>
  <p>And here's my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style type = "text/css"&gt;
        select {
          color:            #ffffff;
          background-color: #ff8800;
          border-width:     3px;
          border-color:     #ff0000;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;select&gt;
        &lt;option value = ""&gt;[Select an option]
        &lt;option value = "1"&gt;Option 1
        &lt;option value = "2"&gt;Option 2
        &lt;option value = "3"&gt;Option 3
        &lt;option value = "4"&gt;Option 4
        &lt;option value = "5"&gt;Option 5
      &lt;/select&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>