The select component options have no styles.

[ka-terok]

The select component options have no styles.

"tailwindcss": "^4.1.17",
"daisyui": "^5.5.3",

<fieldset class="fieldset"> <legend class="fieldset-legend">Browsers</legend> <select class="select"> <option disabled selected> Pick a browser </option> <option>Chrome</option> <option>FireFox</option> <option>Safari</option> </select> <span class="label">Optional</span> </fieldset>

It looks like this

But in the documentation

OS: Ubuntu 20.04
Device: PC browser: Google Chrome 122.0.6261.111

I noticed that everything works in Windows 10. I am running the same build simultaneously on windows and ubuntu

When I click on select, a message appears in the elements.

But ubuntu doesn't have that

The react app
"react": "^19.2.0",

global.css
@import "tailwindcss";
@plugin "daisyui" {
themes: "all";
}

I also tried to connect directly.
@import "tailwindcss";
@import "daisyui/daisyui.css";
@import "daisyui/themes.css";

And via cdn

[pdanpdan]

Please make a play to show the problem. Also please specify the browser and os/device where you see the problem, and how/what you use to build your web page.

[GeorgiosDrivas]

I am not sure if this is the solution, but try to specify a theme for daisyUI, see this.
I was having the same issue where the colors of a component where different from the demo, but adding a theme changed it.

[pdanpdan]

No, it's a build environment problem.
But without details we cannot help

[GeorgiosDrivas]

Apologies for irrelevant answers. I had the same issue and themes solved it, but I guess it was just UI problem.

[anthonylex]

@GeorgiosDrivas Do you recall specifically what you did to solve it?

@ka-terok Did you manage to get it sorted.

[ka-terok]

No.
I noticed that everything works in Windows 10. I am running the same build simultaneously on Windows and Ubuntu.
Our users don't use Ubuntu, so the issue is no longer relevant.

[yudin-s]

Native <select><option> styling is partly controlled by the browser and the operating system, so the dropdown list is not something daisyUI can style consistently everywhere.

daisyUI's select class mainly styles the closed select control. The opened options popup is rendered by the user agent/OS in many browsers, which is why you can see different behavior between Windows and Ubuntu with the same build.

So I would separate two expectations:

• styling the select box itself: daisyUI can handle this
• styling the opened option list: not reliable with native <select> across OS/browser combinations

If you need the dropdown menu to look exactly like the docs/design system on every platform, use a custom select/listbox component instead of native <select>. For example, a popover/listbox implementation can be fully styled with Tailwind/daisyUI classes because the options are normal DOM elements.

If the closed select itself is unstyled, then it is a build/config issue. But if only the opened option popup differs, that is expected native control behavior rather than missing daisyUI CSS.

[waseigo]

I have the same issue across two different Phoenix 1.8.1 LiveView apps with daisyUI included. One of them shows <select> dropdowns nicely styled with daisyUI by using CoreComponents.input. The other one doesn't; it shows native <select> dropdowns.

The browser is always Chrome on Debian 13.

Given this, how does the theory about styling the opened option list hold up?

[waseigo]

See this comparison. Same PC, same OS, same browser. Same version of Tailwind (4.1.12). Same vanilla out-of-the-box assets/css/app.css.

Ah, but I found the reason: the app with the styled <select> uses daisyUI 5.5.8 (I must have updated it some time ago), whereas the one with the browser-native <select> is still at daisyUI 5.0.35.

Downloading the latest daisyui.js fixed it: