Select with appearence: base-select open toggle styling should probably match normal select focus styling

[oliverhaas]

I've been using DaisyUI for a while now, but only started using <select> with appearence: base-select more heavily recently.

I noticed for some cases that the styling seemed off to me, and in turns out that the focus behavior is different.

For an OS native style option open dropdown, the select toggle is :focus when open

while for the appearence: base-select it is not :focus, both technically and visually

and I would have expected visually this here

The changes (only visual of course) wouldn't be that big, basically just piggybacking the :open, which is only active for appearance: base-select <select> elements:

diff --git a/packages/daisyui/src/components/select.css b/packages/daisyui/src/components/select.css
index 35e2a3f0fc9..831f7a5a66d 100644
--- a/packages/daisyui/src/components/select.css
+++ b/packages/daisyui/src/components/select.css
@@ -56,7 +56,8 @@
     }
 
     &:focus,
-    &:focus-within {
+    &:focus-within,
+    &:open {
       --input-color: var(--color-base-content);
       box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
       outline: 2px solid var(--input-color);
@@ -145,7 +146,8 @@
     border-color: #0000;
 
     &:focus,
-    &:focus-within {
+    &:focus-within,
+    &:open {
       @apply text-base-content bg-base-100;
       border-color: #0000;
       box-shadow: none;
@@ -157,7 +159,8 @@
   @layer daisyui.l1.l2 {
     &,
     &:focus,
-    &:focus-within {
+    &:focus-within,
+    &:open {
       --input-color: var(--color-neutral);
     }
   }
@@ -167,7 +170,8 @@
   @layer daisyui.l1.l2 {
     &,
     &:focus,
-    &:focus-within {
+    &:focus-within,
+    &:open {
       --input-color: var(--color-primary);
     }
   }
@@ -177,7 +181,8 @@
   @layer daisyui.l1.l2 {
     &,
     &:focus,
-    &:focus-within {
+    &:focus-within,
+    &:open {
       --input-color: var(--color-secondary);
     }
   }
@@ -187,7 +192,8 @@
   @layer daisyui.l1.l2 {
     &,
     &:focus,
-    &:focus-within {
+    &:focus-within,
+    &:open {
       --input-color: var(--color-accent);
     }
   }
@@ -197,7 +203,8 @@
   @layer daisyui.l1.l2 {
     &,
     &:focus,
-    &:focus-within {
+    &:focus-within,
+    &:open {
       --input-color: var(--color-info);
     }
   }
@@ -207,7 +214,8 @@
   @layer daisyui.l1.l2 {
     &,
     &:focus,
-    &:focus-within {
+    &:focus-within,
+    &:open {
       --input-color: var(--color-success);
     }
   }
@@ -217,7 +225,8 @@
   @layer daisyui.l1.l2 {
     &,
     &:focus,
-    &:focus-within {
+    &:focus-within,
+    &:open {
       --input-color: var(--color-warning);
     }
   }
@@ -227,7 +236,8 @@
   @layer daisyui.l1.l2 {
     &,
     &:focus,
-    &:focus-within {
+    &:focus-within,
+    &:open {
       --input-color: var(--color-error);
     }
   }

I feel that would look better, but might be the only one who feels this way, so I thought I start here in the discussions...

Anyway, great library, and thanks for the great work! 😃

[pdanpdan]

sounds good to me, but if you create a PR make it against the 5.6 branch (it has some changes for select and it would avoid the need for a rebase)

[saadeghi]

@pdanpdan is right. If planning for a PR, please open it for v5.6 branch.

[oliverhaas]

See #4529

[saadeghi]

Will be available in daisyUI 5.6. Thank you @oliverhaas