Choices.js w/ DaisyUI styling #2817

NikarashiHatsu · 2024-02-04T14:38:36Z

NikarashiHatsu
Feb 4, 2024

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:

Luzefiru · 2024-03-22T04:08:26Z

Luzefiru
Mar 22, 2024

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;
  }

5 replies

NikarashiHatsu Mar 22, 2024
Author

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 Mar 22, 2024

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 Mar 22, 2024

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 Mar 23, 2024
Author

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 Mar 25, 2024

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

rubenuijtdewilligen · 2024-04-22T17:04:38Z

rubenuijtdewilligen
Apr 22, 2024

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

0 replies

bsiebens · 2024-08-25T13:18:55Z

bsiebens
Aug 25, 2024

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?

1 reply

bsiebens Aug 25, 2024

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 · 2024-09-26T09:11:17Z

bogdan
Sep 26, 2024

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] {

1 reply

NikarashiHatsu Sep 27, 2024
Author

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 · 2024-10-10T21:39:17Z

Fak3
Oct 10, 2024

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

4 replies

saadeghi Oct 10, 2024
Maintainer

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 Oct 11, 2024

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 Oct 11, 2024

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 Oct 11, 2024

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 · 2024-10-11T09:16:42Z

Fak3
Oct 11, 2024

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?

1 reply

Fak3 Oct 12, 2024

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 · 2024-10-19T12:08:41Z

Fak3
Oct 19, 2024

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>

1 reply

Fak3 Oct 19, 2024

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;
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Choices.js w/ DaisyUI styling #2817

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 7 comments 13 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Choices.js w/ DaisyUI styling #2817

Replies: 7 comments · 13 replies

EDIT

NikarashiHatsu Mar 22, 2024 Author

NikarashiHatsu Mar 23, 2024 Author

NikarashiHatsu Sep 27, 2024 Author

saadeghi Oct 10, 2024 Maintainer

Replies: 7 comments 13 replies

NikarashiHatsu Mar 22, 2024
Author

NikarashiHatsu Mar 23, 2024
Author

NikarashiHatsu Sep 27, 2024
Author

saadeghi Oct 10, 2024
Maintainer