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

2026-04-27 16:23:40 +01:00
2 changed files with 36 additions and 5 deletions
@@ -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 --}}
@@ -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)