CODEWITHSUNDEEP
cssfirefox
darkhorse
darkhorse

Reputation: 8722

Styling a select box without the options in Firefox

I am trying to style the select box into a darker theme. The issue is that in Firefox, the background and the color of the options in the options box also changes according to my styles, which is something I definitely don't want. Here's the code:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        body {
            background: black;
        }
        select {
            background-color: rgba(0, 0, 0, 0.15);
            color: rgba(255, 255, 255, 0.85);
            border: 1px solid #111417;
        }
    </style>
</head>
<body>
    <select>
        <option value="0">Select car</option>
        <option value="1">Audi</option>
        <option value="2">BMW</option>
    </select>
</body>
</html>

Here's a screenshot of how the options box looks like:

Image

The contrast is very low, due to the application of the styles. It works perfectly in Chrome, where the options box remains the same as before. How can I solve this issue?

Upvotes: 0

Views: 480

Answers (1)

MoritzLost
MoritzLost

Reputation: 2829

Testing and findings

I experimented a bit and found that the Firefox doesn't use the background color for the select dropdown when it's specified with the rgba(0, 0, 0, 0.15) function, but does so when you use rgb(0, 0, 0), #FFFFFF or black. Snippet with some tests:

body {
  background: black;
  color: white;
}

select {
  width: 200px;
}

.select1 {
  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid #111417;
}

.select2 {
  background-color: rgb(0, 0, 0);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid #111417;
}

.select3 {
  background-color: black;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid #111417;
}

.select4 > option {
    color: rgba(255, 255, 255, 0.85);  
}
.select4 > option:nth-child(2) {
  background: rgba(0, 0, 0, 0.15);
}
.select4 > option:nth-child(3) {
  background: rgba(0, 0, 0);
}
.select4 > option:nth-child(4) {
  background: black;
}
<h2>
Background: <code>rgba(0, 0, 0, 0.15)</code>
</h2>
<select class="select1">
  <option value="0">Select car</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
</select>

<h2>
Background: <code>rgba(0, 0, 0)</code>
</h2>
<select class="select2">
  <option value="0">Select car</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
</select>

<h2>
Background: <code>black</code>
</h2>
<select class="select3">
  <option value="0">Select car</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
</select>

<h2>
Backgrounds on <code>&lt;option&gt;</code> Tags
</h2>
<select class="select4">
  <option selected value="default">Default</option>
  <option value="0">background: rgba(0, 0, 0, 1.5)</option>
  <option value="1">background: rgb(0, 0, 0)</option>
  <option value="2">background: black</option>
</select>

In Firefox 69 and 70 (current stable and nightly release, respectively) on OS X, the first select has a light background with white text color (as in your screenshot), while the second and third ones have the dark background with white text, as specified.

I'm not sure if this is a bug or intentional. Maybe the a half-transparent background would be troublesome with the system dropdown.

Interestingly enough, Firefox apparently also allows styling the <option> Tags directly. The fourth example has different backgrounds for the second, third and fourth option. Again, all but the one using rgba work as intendend.

In Chrome and Safari, the dropdowns look identical for all examples, as they don't allow any styling on the dropdowns.

Workaround

A workaround for your problem would be to set the select background with rgb instead of rgba, than you get a dark dropdown with white text, which would match your theme.

If you really need to use rgba for the select background, you could also set the color of the option tags to black to get a better contrast to the white background in Firefox. Chrome and Safari will ignore those options completely. However, you'll want to test this in newer Firefox versions as they come out. On OS X in Chrome and Safari, you get dark-themed dropdowns if you use the dark system theme. If Firefox follows suit, but still allows you to overwrite the option color, this would get you dark text on a dark background.

In any case, you'll want to check how your solution behaves in all browsers, as support for styling select elements and their dropdowns varies from vendor to vendor.

Upvotes: 2

Related Questions