From ff5ad8b062414d8a972631a19b181c80d2adc15d Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 22 Mar 2021 10:46:39 +0100
Subject: [PATCH] Avoid rendering native select widget

---
 src/theme.scss | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/theme.scss b/src/theme.scss
index c9cd4c68f..e5c38b04b 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -108,6 +108,17 @@ $state-danger-border:                       $brand-danger;
     color: white;
 }
 
+select.form-control {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+    background-repeat: no-repeat;
+    background-position-x: 100%;
+    background-position-y: 5px;
+}
+
 input[type="checkbox"], input[type="radio"] {
     margin-top: 2px;
 }
@@ -1865,7 +1876,6 @@ tag-input {
     }
 }
 
-
 // ----------------------------
 // Dark mode overrides
 // ----------------------------
@@ -1880,6 +1890,10 @@ tag-input {
         background-color: $backgroundLight;
     }
 
+    select.form-control {
+        background-image: url("data:image/svg+xml;utf8,<svg fill='#959595' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+    }
+
     .navbar-default {
         background-color: $backgroundDark;
         border-color: $backgroundDark;