Apply safari-only classes for multiselect listboxes (non-select2)

resources/views/layouts/default.blade.php

@@ -212,10 +212,6 @@
         input[type="email"],
         input[type="password"],
         input[type="tel"],
-        option:active,
-        option[active],
-        option[selected],
-        select option,
         select,
         textarea
         {
@@ -225,6 +221,12 @@
 
         }
 
+        option:active,
+        option[active] {
+            background-color: var(--input-border-color) !important;
+            color: var(--nav-primary-text-color) !important;
+        }
+
         .select2-container--default.select2-container--focus .select2-selection--multiple,
         .select2-container--default .select2-search--dropdown .select2-search__field {
             border-color: hsl(from var(--main-theme-color) h s calc(l - 5)) !important;
@@ -1132,6 +1134,35 @@
         }
 
 
+        /*select[multiple]:has(option[selected]) {*/
+        /*    background: purple !important;*/
+        /*    color: white !important;*/
+        /*}*/
+
+
+        select[multiple] {
+            option[selected],
+            option:focus,
+            option:active,
+            option:checked {
+                background-color: hsl(from var(--main-theme-color) h s calc(l - 5)) !important;
+                color: var(--nav-primary-text-color) !important;
+            }
+        }
+
+        /**
+        Since Safari doesn't allow tweaking option background colors - sometimes -
+        this at least sets the background of the
+        select to a higher contrast color
+         */
+        @media screen and (-webkit-min-device-pixel-ratio: 0) {
+            select[multiple] {
+                background-color: light-dark(white, var(--input-border-color)) !important;
+            }
+        }
+
+
+
     </style>
 
     {{-- Custom CSS --}}

resources/views/users/edit.blade.php

@@ -607,7 +607,7 @@
                                                         size="{{ ($groups->count() > 25) ? '25' : '10' }}"
                                                         aria-label="groups[]"
                                                         id="groups[]"
-                                                        multiple="multiple"
+                                                        multiple
                                                         class="form-control">
 
                                                     @foreach ($groups as $id => $group)