Choices.js w/ DaisyUI styling

[NikarashiHatsu]

Hey everyone, I wanted to share what I've been working on for the past hour. I've been diving into this thing for several reasons, but primarily because I found a limited selection of visually appealing libraries like Select2, Choices.js, and Tom Select that meet my specific requirements, specifically when it is paired with Tailwind CSS. Therefore, I took it upon myself to create one that fits.

Please feel free to give it a try, and I hope it meets your expectations!

The CSS file

.choices {
    @apply relative overflow-hidden;
}

.choices:focus {
    @apply outline-0;
}

.choices:last-child {
    @apply mb-0;
}

.choices.is-open {
    @apply overflow-visible;
}

.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input {
    @apply bg-base-200 cursor-not-allowed select-none;
}

.choices.is-disabled .choices__item {
    @apply cursor-not-allowed;
}

.choices [hidden] {
    @apply !hidden;
}

.choices[data-type*=select-one] {
    @apply cursor-pointer;
}

.choices[data-type*=select-one] .choices__input {
    @apply w-full ring-transparent ring-0 border-0 border-b border-b-base-300;
}

.choices[data-type*=select-one] .choices__button {
    @apply w-2 ml-0 p-2 bg-center;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 8px;
}

.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover {
    @apply opacity-100;
}

.choices[data-type*=select-one] .choices__button:focus {
    box-shadow: 0 0 0 2px #00bcd4
}

.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
    @apply hidden;
}

.choices[data-type*=select-one].is-open::after {
    border-color: transparent transparent #333;
    margin-top: -7.5px
}

.choices[data-type*=select-one][dir=rtl]::after {
    @apply left-3 right-auto;
}

.choices[data-type*=select-one][dir=rtl] .choices__button {
    @apply left-0 right-auto ml-6 mr-0;
}

.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner {
    @apply cursor-text;
}

.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button {
    @apply relative inline-block w-2;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 8px;
}

.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover {
    @apply opacity-100;
}

.choices__inner {
    @apply border px-3 py-2 rounded-lg border-base-300;
}

.choices__inner:has(select) {
    @apply select select-bordered w-full;
}

.choices:has(select) .choices__input {
    @apply inline-block text-sm border-0 px-3 ring-0 border-base-300 py-2 !ring-transparent;
}

.is-open .choices__inner {
    @apply border rounded-t-lg rounded-b-none;
}

.is-flipped.is-open .choices__inner {
    @apply rounded-b-lg;
}

.choices__list {
    @apply m-0 pl-0 list-none;
}

.choices__list--single {
    @apply flex flex-col justify-center w-full;
}

[dir=rtl] .choices__list--single {
    @apply pl-4 pr-2;
}

.choices__list--single .choices__item {
    @apply w-full flex items-center justify-between;
}

.choices__list--multiple {
    @apply inline;
}

.choices__list--multiple .choices__item {
    @apply badge badge-primary rounded-lg mr-1 break-all box-border inline-flex justify-center items-center;
}

.choices__list--multiple .choices__item[data-deletable] {
    @apply pr-2;
}

[dir=rtl] .choices__list--multiple .choices__item {
    @apply mr-0 ml-1;
}

.choices__list--multiple .choices__item.is-highlighted {
    @apply badge-secondary;
}

.is-disabled .choices__list--multiple .choices__item {
    @apply opacity-50;
}

.choices__list--dropdown,.choices__list[aria-expanded] {
    @apply invisible z-[1] absolute w-full border top-full -mt-px overflow-hidden break-all will-change-auto;
}

.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded] {
    @apply border-base-300;
}

.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded] {
    @apply visible;
}

.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded] {
    @apply border-base-300 rounded-b-lg;
}

.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded] {
    @apply bottom-full mt-0 -mb-px;
}

.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list {
    @apply relative max-h-[300px] overflow-auto will-change-auto;
}

.choices__item--choice.is-selected {
    @apply bg-base-200;
}

.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item {
    @apply transition duration-300 ease-in-out text-sm px-4 py-2 hover:bg-base-200;
}

[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item {
    @apply text-right;
}

@media (min-width: 640px) {
    .choices__list--dropdown .choices__item--selectable,.choices__list[aria-expanded] .choices__item--selectable {
        @apply pr-[100px];
    }

    .choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after {
        @apply text-xs opacity-0 absolute right-2 top-1/2 -translate-y-1/2;

        content: attr(data-select-text);
    }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
        @apply text-right pl-[100px] pr-2;
    }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after {
        @apply right-auto left-2;
    }
}

.choices__input {
    @apply inline-block text-sm border-0 px-1 ring-0 border-base-300 py-[0.315rem] !ring-transparent;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    @apply bg-base-200;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
    @apply opacity-50;
}

.choices__item {
    @apply cursor-default;
}

.choices__item--selectable {
    @apply cursor-pointer;
}

.choices__item--disabled {
    @apply cursor-not-allowed select-none opacity-50;
}

.choices__heading {
    @apply font-medium text-xs p-2 border-b border-base-300;
}

.choices__button {
    @apply -indent-[9999px] appearance-none border-0 bg-transparent cursor-pointer bg-no-repeat h-2 ml-2;
}

.choices__button:focus,.choices__input:focus {
    @apply outline-0;
}

.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration {
    @apply hidden;
}

.choices__input::-ms-clear,.choices__input::-ms-reveal {
    @apply hidden w-0 h-0;
}

[dir=rtl] .choices__input {
    @apply pr-1 pl-0;
}

.choices__placeholder {
    @apply opacity-50;
}

The CSS file (updated after the issue @Luzefiru provided below)

.choices {
    @apply relative overflow-hidden;
}

.choices:focus {
    @apply outline-0;
}

.choices:last-child {
    @apply mb-0;
}

.choices.is-open {
    @apply overflow-visible;
}

.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input {
    @apply bg-base-200 cursor-not-allowed select-none;
}

.choices.is-disabled .choices__item {
    @apply cursor-not-allowed;
}

.choices [hidden] {
    @apply !hidden;
}

.choices[data-type*=select-one] {
    @apply cursor-pointer;
}

.choices[data-type*=select-one] .choices__input {
    @apply w-full ring-transparent ring-0 border-0 border-b border-b-base-300;
}

.choices[data-type*=select-one] .choices__button {
    @apply w-2 ml-0 p-2 bg-center;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 8px;
}

.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover {
    @apply opacity-100;
}

.choices[data-type*=select-one] .choices__button:focus {
    box-shadow: 0 0 0 2px #00bcd4
}

.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
    @apply hidden;
}

.choices[data-type*=select-one].is-open::after {
    border-color: transparent transparent #333;
    margin-top: -7.5px
}

.choices[data-type*=select-one][dir=rtl]::after {
    @apply left-3 right-auto;
}

.choices[data-type*=select-one][dir=rtl] .choices__button {
    @apply left-0 right-auto ml-6 mr-0;
}

.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner {
    @apply cursor-text inline-table;
}

.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button {
    @apply relative inline-block w-2;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 8px;
}

.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover {
    @apply opacity-100;
}

.choices__inner {
    @apply border px-3 py-2 rounded-lg border-base-300;
}

.choices__inner:has(select) {
    @apply select select-bordered w-full;
}

.choices:has(select) .choices__input {
    @apply inline-block text-sm border-0 px-3 ring-0 border-base-300 py-2 !ring-transparent;
}

.choices:has(select[multiple]) .choices__input {
    @apply px-0 py-0;
}

.is-open .choices__inner {
    @apply border rounded-t-lg rounded-b-none;
}

.is-flipped.is-open .choices__inner {
    @apply rounded-b-lg;
}

.choices__list {
    @apply m-0 pl-0 list-none bg-base-100;
}

.choices__list--single {
    @apply flex flex-col justify-center w-full;
}

[dir=rtl] .choices__list--single {
    @apply pl-4 pr-2;
}

.choices__list--single .choices__item {
    @apply w-full flex items-center justify-between;
}

.choices__list--multiple {
    @apply inline;
}

.choices__list--multiple .choices__item {
    @apply badge badge-primary rounded-lg mr-1 break-all box-border inline-flex inline-table;
}

.choices__list--multiple .choices__item[data-deletable] {
    @apply pr-2;
}

[dir=rtl] .choices__list--multiple .choices__item {
    @apply mr-0 ml-1;
}

.choices__list--multiple .choices__item.is-highlighted {
    @apply badge-secondary;
}

.is-disabled .choices__list--multiple .choices__item {
    @apply opacity-50;
}

.choices__list--dropdown,.choices__list[aria-expanded] {
    @apply invisible z-[1] absolute w-full border top-full -mt-px overflow-hidden break-all will-change-auto;
}

.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded] {
    @apply border-base-300;
}

.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded] {
    @apply visible;
}

.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded] {
    @apply border-base-300 rounded-b-lg;
}

.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded] {
    @apply bottom-full mt-0 -mb-px;
}

.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list {
    @apply relative max-h-[300px] overflow-auto will-change-auto;
}

.choices__item--choice.is-selected {
    @apply bg-base-200;
}

.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item {
    @apply transition duration-300 ease-in-out text-sm px-4 py-2 hover:bg-base-200;
}

[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item {
    @apply text-right;
}

@media (min-width: 640px) {
    .choices__list--dropdown .choices__item--selectable,.choices__list[aria-expanded] .choices__item--selectable {
        /* @apply pr-[100px]; */
    }

    .choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after {
        @apply text-xs opacity-0 absolute right-2 top-1/2 -translate-y-1/2;
    }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
        @apply text-right pl-[100px] pr-2;
    }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after {
        @apply right-auto left-2;
    }
}

.choices__input {
    @apply inline-block text-sm border-0 px-1 ring-0 border-base-300 py-[0.315rem] !ring-transparent;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    @apply bg-base-200;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
    @apply opacity-50;
}

.choices__item {
    @apply cursor-default;
}

.choices__item--selectable {
    @apply cursor-pointer;
}

.choices__item--disabled {
    @apply cursor-not-allowed select-none opacity-50;
}

.choices__heading {
    @apply font-medium text-xs p-2 border-b border-base-300;
}

.choices__button {
    @apply -indent-[9999px] appearance-none border-0 bg-transparent cursor-pointer bg-no-repeat h-2 ml-2;
}

.choices__button:focus,.choices__input:focus {
    @apply outline-0;
}

.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration {
    @apply hidden;
}

.choices__input::-ms-clear,.choices__input::-ms-reveal {
    @apply hidden w-0 h-0;
}

[dir=rtl] .choices__input {
    @apply pr-1 pl-0;
}

.choices__placeholder {
    @apply opacity-50;
}

There are certain aspects that I haven't had the opportunity to test yet as they primarily relate to edge cases. However, if you're interested in contributing, I've prepared a checklist detailing what has been tested and what remains to be explored:

• Single select input
• Multiple select input
• Text input
• RTL support
• Multiple select disabled state
• Option Group
• Custom Templates

[Luzefiru]

One edge case I found is that the following class

.choices__inner:has(select) {
    @apply select select-bordered w-full;
}

limits the height and doesn't allow it to expand the selection container.

EDIT

Adding h-fit to the CSS selector solves this.

  .choices__inner:has(select) {
    @apply w-full select select-bordered h-fit;
  }

[NikarashiHatsu]

I noticed this as well as I'm using this package in production recently.
I'll update some tweaks today, let me know if there's more issues regarding the styling.

[Luzefiru]

Thanks! I'll be sure to note down some nuances I find while using it.

Here's another: borders on the dropdown menu seems to be inconsistent on dark theme.

[Luzefiru]

The search input field does not fully contain all the text. This is because Choices.js automatically resizes the input container based on the amount of text inside it.

[NikarashiHatsu]

Hi @Luzefiru! Sorry for the late reply, has been busy on another project lately, but here's my styling workaround. Hope it fix your issues:

.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner {
-    @apply cursor-text;
+    @apply cursor-text inline-table;
}

.choices__list--multiple .choices__item {
-    @apply badge badge-primary rounded-lg mr-1 break-all box-border inline-flex justify-center items-center;
+    @apply badge badge-primary rounded-lg mr-1 break-all box-border inline-flex inline-table;
}

+.choices:has(select[multiple]) .choices__input {
+    @apply px-0 py-0;
+}

.choices__list {
-    @apply m-0 pl-0 list-none;
+    @apply m-0 pl-0 list-none bg-base-100;
}

[Luzefiru]

The text input visibility is fixed now, thanks @NikarashiHatsu!

[rubenuijtdewilligen]

Thank you! This is awesome. My use case is selecting which groups of users have access to a specific item in my saas.

[bsiebens]

This is exactly what I was lookin for. Thanks! Looks great, but for some reason the edges are not curved for me.

I included the css in my main css file and see all the styling in my output, yet for some reason the curves of the dropdown are not the same as for the the standard DaisyUI dropdown. Any thoughts?

[bsiebens]

So figured it out, I had the style include in the @layer section, which caused them to not be included. Now only to solve the double dropdown arrow issue :-)

[bogdan]

Looked like this for me when initially installed:

I had to do the following modifications to make it work:
(the styling of js-choices is done to prevent input to jump around the interface between dom:ready and choices being applied to input)

--- tmp/choices.css     2024-09-26 11:03:44
+++ app/assets/stylesheets/choices.css  2024-09-26 11:07:54
@@ -1,4 +1,10 @@
- .choices {
+.js-choices {
+  @apply max-h-12;
+}
+.js-choices option {
+  @apply hidden;
+}
+.choices {
     @apply relative overflow-hidden;
 }

@@ -38,7 +44,9 @@
     @apply w-2 ml-0 p-2 bg-center;

     background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
-    background-size: 8px;
+    background-size: contain;
+    height: fit-content;
+    background-position: center;
 }

 .choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover {
@@ -74,7 +82,9 @@
     @apply relative inline-block w-2;

     background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
-    background-size: 8px;
+    background-size: contain;
+    height: fit-content;
+    background-position: center;
 }

 .choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover {
@@ -90,7 +100,7 @@
 }

 .choices:has(select) .choices__input {
-    @apply inline-block text-sm border-0 px-3 ring-0 border-base-300 py-2 !ring-transparent;
+    @apply inline-block text-sm border-0 px-3 ring-0 border-base-300 py-2 !ring-transparent bg-inherit;
 }

 .choices:has(select[multiple]) .choices__input {
@@ -126,7 +136,7 @@
 }

 .choices__list--multiple .choices__item {
-    @apply badge badge-primary rounded-lg mr-1 break-all box-border inline-flex inline-table;
+    @apply badge badge-secondary rounded-lg mr-1 break-all box-border inline-flex inline-table;
 }

 .choices__list--multiple .choices__item[data-deletable] {

[NikarashiHatsu]

Thank you for your contribution on this discussion, I'll look forward into your implementation and recheck whether it is suitable for revised styling or not.

[Fak3]

This css looks completely broken, all rules appear empty in dev tools:

[saadeghi]

If you are putting .choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner {@apply cursor-text;} in your CSS file and the same style is not showing up in devtools, it's not the problem of style. there's an issue with your setup.

[Fak3]

No, I have copied exact CSS as in the original post. All those @apply rules are completely ignored by browser.

If I replace that @apply rule with "background-color: #F00;" - then this background style gets correctly recognized and applied to the dom element:

[Fak3]

It appears that the file the author attached is not valid CSS, but it is a PostCSS script, that you are supposed to transpile. My attempts to do so now results in an error:

> npx tailwindcss -i ./static/choices.post.css -o ./static/choices.css
CssSyntaxError: tailwindcss: /home/z/pproj/npserver/static/choices.post.css:22:5: The `bg-base-200` class does not exist. If `bg-base-200` is a custom class, make sure it is defined within a `@layer` directive.

Anyone encountered the same error?

[Fak3]

Ah, I had to add require('daisyui'), to my tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./ufo/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
}

[Fak3]

The multiple select input appears with awkward white background:

It seems to come from https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css:

Anyone encountered this?

[Fak3]

I have removed https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css completely from my html and applied patch which @bogdan sent in comments above, this seem to have helped.

[Fak3]

Since some time Choices.js support overriding classes in its constructor with classNames property. So I managed to (partially) adapt the postcss script attached in the comments above. It works for <select multiple>, i have not ported it for other input types.
This solution does not require to transpile postcss script, so it is compatible with daisyui and tailwind-css served from cdn

The example which uses alpinejs:

<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.js"></script>


<script>
  daisyChoices = {
      containerOuter: 'choices relative overflow-hidden rounded-lg',
      containerInner: 'choices__inner inline-table px-3 py-0 min-h-1 h-1 select w-full bg-inherit pe-10 cursor-text',
      input: 'choices__input pl-0 inline-block text-sm border-0 ring-0 border-base-300 px-0 py-0 !ring-transparent bg-inherit w-full',
      list: 'choices__list m-0 pl-0 list-none border-0 bg-inherit',
      listDropdown: 'choices__list--dropdown z-[1] absolute px-2 !bg-base-100 lg:px-4 w-full border-1 border-base-300 top-full overflow-auto break-all will-change-auto',
      item: 'choices__item badge badge-primary  rounded-lg mr-1 break-all box-border inline-table',
      itemChoice: 'choices__item--choice cursor-pointer !block !m-auto !my-2 badge-ghost w-full h-auto hover:bg-primary  hover:text-primary-content !text-base bg-base-100 border-none',
      button: "choices__button -indent-[9999px] h-fit appearance-none border-0 bg-transparent cursor-pointer bg-no-repeat h-2 ml-2 bg-[length:1rem_1rem] hover:bg-[length:1.2rem_1.2rem] opacity-100 bg-center bg-[url('/static/x-mark.svg')] relative inline-block w-4",
      disabledState: 'is-disabled bg-base-200 opacity-50',
      openState: 'overflow-visible',
  }

  // Convert string to list of classes
  for (var k in daisyChoices) {
      daisyChoices[k] = daisyChoices[k].split(' ').filter(x => !!x)
  }
</script>

<body>
    <select multiple
          x-init="$el.choices = new Choices($el, {classNames: daisyChoices})"
          class="select hidden w-full max-w-xs"
     >
            <option value="1"> First </option>
            <option value="2"> Second </option>
    </select>
</body>

[Fak3]

Also note that some classes are not available in daisyui served from cdn. Namely I had to define !bg-base-100 class in my own css:

.\!bg-base-100 {
  --tw-bg-opacity: 1 !important;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
}

[layandreas]

The solutions here didn't work well for me, so I started adapting the original style from scratch: choicesjs.css

On mobile Safari using outline + outline offset was problematic as the offset would stay on screen even after choicesjs has removed the focus class. My workaround was targeting the outer box directly and add a border with negative margin + padding:

.is-focused {
  border: 2px solid var(--color-base-content);
  border-radius: calc(var(--radius-field) * 2);
  margin: -2px;
  padding: 2px; /* adjust offset */
}

This is how it looks:

[c-nv-s]

thanks layandreas, I also noticed the previous styles did not seem to be working with v5.
Will give your css file a go.
Fak3 you may need to review your daisyChoices settings because the select box rendering seemed quite broken when I checked.