Fix select dropdown style for safari + ios

src/components/input/SelectField.tsx

@@ -19,7 +19,7 @@ export function SelectField(props: Props) {
 
   return (
     <select
-      className={`px-1.5 py-1 text-sm border border-gray-500 rounded bg-transparent invalid:text-gray-400 focus:outline-none ${
+      className={`px-1.5 py-1 text-sm border border-gray-500 rounded bg-transparent invalid:text-gray-400 ${
         classes || ''
       }`}
       {...passThruProps}

src/styles/globals.css

@@ -18,6 +18,21 @@ a {
   text-decoration: none;
 }
 
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23010101'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
+  background-size: 8px;
+  background-position: 92% 60%;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+select:focus {
+  outline: none;
+}
+
 /*
 Text and shadows
 ================