Use custom appearance for selects

Author: NielsLeenheer

tools/playground.html

@@ -472,12 +472,18 @@
             select {
                 border: none;
                 border-radius: 6px;
-                padding: 6px;
+                padding: 6px 28px 6px 6px;
 
                 margin: 14px 15px 14px 0;
                 font-family: system-ui;
                 font-weight: bold;
                 font-size: 10pt;
+
+                appearance: none;
+                background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CjxwYXRoIGZpbGw9IiMyMTk2RjMiIGQ9Ik00MyAxNy4xTDM5LjkgMTQgMjQgMjkuOSA4LjEgMTQgNSAxNy4xIDI0IDM2eiI+PC9wYXRoPgo8L3N2Zz4=);
+                background-repeat: no-repeat;
+                background-position: right 6px center;
+                background-size: 16px;
             }
 
             button {