Improved the style of select elements (now also works on WebKit browsers)

2023-04-15 15:30:53 +02:00 · 2023-04-15 15:30:53 +02:00 · 79d148bfd0
commit 79d148bfd0
parent c74744d720
5 changed files with 11 additions and 2 deletions
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@ -79,7 +79,15 @@ input[type="text"], input[type="password"], input[type="number"], select {
 }

 select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
    height: 2.5rem;
+    background-image: url("/static/material-icons/arrow-drop-down.svg");
+    background-repeat: no-repeat;
+    background-position: right;
+    background-size: 1.5rem;
+    padding-right: 1.8rem;
 }

 table {
--- a/app/static/material-icons/arrow-drop-down.svg
+++ b/app/static/material-icons/arrow-drop-down.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" height="48" viewBox="0 96 960 960" width="48"><path d="M480 696 280 497h400L480 696Z"/></svg>
--- a/app/static/material-icons/menu.svg
+++ b/app/static/material-icons/menu.svg
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" height="48" viewBox="0 96 960 960" width="48"><path d="M480 696 280 497h400L480 696Z"/></svg>`