From 3cf2bb9b5938fe61a7914704bbcd354a4eaa956c Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 12 Dec 2022 13:54:30 +0100
Subject: [PATCH] Change arrow direction of active select button

When the select-dropdown is open, let's use an arrow pointing upwards
isntead. Note that we can't easily animate the change in
background-image.
---
 app/styles/input.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index cc4087cd..8ea38c2b 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -83,7 +83,16 @@ select {
   padding-right: calc(2*7px + 8px);
   padding-left: 7px;
 }
-
+select:active {
+  /* Rotated arrow */
+  --select-arrow: 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" transform="rotate(180)" > \
+          <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>');
+}
 option {
   color: black;
   background: white;