search

themesberg / flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS
https://flowbite-svelte.com
MIT License
2.22k stars 272 forks source link

Text color of `Select` component not changed when disabled #1302

Closed cpsoinos closed 7 months ago

cpsoinos commented 7 months ago

Describe the bug

When you have a disabled Select component, the selected option's text color does not change to appear disabled. This is particularly noticeable in Safari, where the user-agent stylesheet doesn't apply opacity: 0.7; to disabled select inputs.

State Chrome Safari
Enabled image image
Disabled image image

I intend to submit a PR to address this.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-skxcco?file=src%2Froutes%2F%2Bpage.svelte

Flowbite version and System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 411.61 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.5.2 - ~/.nvm/versions/node/v20.12.0/bin/npm
    bun: 1.0.36 - /opt/homebrew/bin/bun
  Browsers:
    Brave Browser: 117.1.58.135
    Chrome: 123.0.6312.107
    Edge: 123.0.2420.81
    Safari: 17.4.1
  npmPackages:
    @sveltejs/kit: ^2.5.5 => 2.5.5
    flowbite-svelte: ^0.44.24 => 0.44.24
    svelte: ^4.2.13 => 4.2.13
    vite: ^5.2.8 => 5.2.8
shinokada commented 7 months ago

Why stackblitz doesn't work on Safari?