From fc5bb6dab6af005e67f8827c5e09feb3ea2ff6de Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Thu, 17 Nov 2022 08:34:50 +0100
Subject: [PATCH] Add "arrow" to <select> elements

Since we are setting "appearance: none" on our <select> elements, the
drop down arrow from the browser is hidden. This arrow doesn't fit in
visually though. This commit adds a new arrow from a simple data url
SVG. Its a dark triangle "pointing" downwards.

Note that we need to set the background to both the gradient and the
image here. Both use the "background-image" property for the graphic,
but since they are positioned differently we must use the general
"background" shorthand.
---
 app/styles/input.css | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index f1a11913..d6499a66 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -66,9 +66,23 @@ button {
 }
 
 select {
-  padding-right: 7px;
+  --select-arrow: calc(100% - 7px) no-repeat url('data:image/svg+xml;utf8, \
+      <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \
+           xmlns="http://www.w3.org/2000/svg"> \
+          <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>');
+  background: var(--select-arrow),
+              linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+  padding-right: calc(2*7px + 8px);
   padding-left: 7px;
 }
+:root:not(.noVNC_touch) select:hover:not(:disabled) {
+  background: var(--select-arrow),
+              linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+}
+
 option {
   color: black;
   background: white;
@@ -137,7 +151,6 @@ select:active {
 :root:not(.noVNC_touch) input[type=color]:hover:not(:disabled),
 :root:not(.noVNC_touch) input[type=reset]:hover:not(:disabled),
 :root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
-:root:not(.noVNC_touch) button:hover:not(:disabled),
-:root:not(.noVNC_touch) select:hover:not(:disabled) {
+:root:not(.noVNC_touch) button:hover:not(:disabled) {
   background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
 }