diff --git a/app/styles/constants.css b/app/styles/constants.css
index fb1f5509..daf39616 100644
--- a/app/styles/constants.css
+++ b/app/styles/constants.css
@@ -12,6 +12,9 @@
     --novnc-lightgrey: rgb(192, 192, 192);
     --novnc-darkgrey: rgb(92, 92, 92);
 
+    /* Transparent to make button colors adapt to the background */
+    --novnc-buttongrey: rgba(192, 192, 192, 0.5);
+
     --novnc-blue: rgb(110, 132, 163);
     --novnc-lightblue: rgb(74, 144, 217);
     --novnc-darkblue: rgb(83, 99, 122);
diff --git a/app/styles/input.css b/app/styles/input.css
index 1a51e54e..e2468ae4 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -41,7 +41,8 @@ select {
     vertical-align: middle;
     margin-top: 0;
     color: black;
-    background-color: white;
+    font-weight: bold;
+    background-color: var(--novnc-buttongrey);
 
     /* Disable Chrome's touch tap highlight */
     -webkit-tap-highlight-color: transparent;
@@ -58,8 +59,18 @@ select {
                   stroke="rgb(31,31,31)" fill="none" \
                   stroke-linecap="round" stroke-linejoin="round" /> \
         </svg>');
+    /* FIXME: A bug in Firefox, requires a workaround for the background:
+              https://bugzilla.mozilla.org/show_bug.cgi?id=1810958 */
+    /* The dropdown list will show the select element's background above and
+       below the options in Firefox. We want the entire dropdown to be white. */
     background-color: white;
-    background-image: var(--select-arrow);
+    /* However, we don't want the select element to actually show a white
+       background, so let's place a gradient above it with the color we want. */
+    --grey-background: linear-gradient(var(--novnc-buttongrey) 100%,
+                                       transparent);
+    background-image:
+        var(--select-arrow),
+        var(--grey-background);
     background-position: calc(100% - var(--input-xpadding)), left top, left top;
     background-repeat: no-repeat;
     padding-right: calc(2*var(--input-xpadding) + 8px);
@@ -74,11 +85,14 @@ select:active {
             <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \
                   stroke="rgb(31,31,31)" fill="none" \
                   stroke-linecap="round" stroke-linejoin="round" /> \
-        </svg>');
+        </svg>'),
+        var(--grey-background);
 }
 option {
+    /* Prevent Chrome from inheriting background-color from the <select> */
+    background-color: white;
     color: black;
-    background: white;
+    font-weight: normal;
 }
 
 /*
@@ -208,10 +222,12 @@ select:hover {
     input[type=submit]:hover,
     input::file-selector-button:hover,
     button:hover {
-        background-color: white;
+        background-color: var(--novnc-buttongrey);
     }
     select:hover {
-        background-image: var(--select-arrow);
+        background-image:
+            var(--select-arrow),
+            var(--grey-background);
     }
 }
 
@@ -263,7 +279,7 @@ input[type=submit]:disabled,
 input:disabled::file-selector-button,
 button:disabled,
 select:disabled {
-    background-color: white;
+    background-color: var(--novnc-buttongrey);
     border-bottom-width: 2px;
     margin-top: 0;
 }
@@ -271,7 +287,9 @@ input[type=file]:disabled {
     background-image: none;
 }
 select:disabled {
-    background-image: var(--select-arrow),
+    background-image:
+        var(--select-arrow),
+        var(--grey-background);
 }
 input[type=image]:disabled {
     /* See Firefox bug: