styling a select element
I need to style a select element according to the screenshot attached below.
https://play.tailwindcss.com/GYsrHP9Cvq here's code until now.
I have been having a couple problems. like the arrow of select element doesn't get affected by padding. I can use border-right transparent but feels hacky.
second is there a way to have a placeholder value when nothing is selected, is marking an option element, selected and disabled the way to go?
I'm not sure if there is a way to control the gap between the select input and dropdown, I couldn't find anything.
there is also a weird border around the dropdown for some reason. outline none or border none doesn't affect it so I'm not sure where it is coming from.
I'll appreciate any help
14 Replies
this is the weird border in drop down
Don't open it in another browser if you're hoping it'll look the same 😄
A lot of form elements can't be styled, or can only be minimally styled. Traditionally, they use the OS version, but each browser also has their own styling on them, most of which can't be overwritten.
Or well, traditionally. If you don't mind going for a progressive enhancement (only in Chromium at the moment), selects are now stylable (though if you're using tailwind, you'll probably want to go with an @apply or something, because there are a lot of pseudo's and stuff you'll need to use).
MDN has a great tutorial on how to do it: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
If you need good browser support, you'll need to make a custom one that you "turn into" a select. The second part here where they introduce JS does a decent job I think, but I only skimmed it: https://blog.logrocket.com/creating-custom-select-dropdown-css/
lol. I also realised this won't work for mobile as that displays some custom ui. I wasn't expecting same tho the borders are confusing
I'll take a look at the mdn tutorial. Probably easier to implement even if low browser support and that's not a concern since this is just for practice
oh damn the browser is using web components for select
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
this is closer
react is throwing me an error tho ts ignore doesn't seem to be working
is the above how I should be using @ apply?
also some questions, I tried setting a background image with bg-[url()] but it doesn't actually display the bg (the content was set to empty string
the first option that is disabled still appears if i do hidden on it but sr-only works not sure why this is
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
the picker had not width or height
now it seems good
none of this will work on safari or anything that's older than may lol
would be funny if selectedcontent is not a premature shipment that can break in future
oh hey what the heck
there is something weird going on here. all those styles somehow disabled the selected toggle with enter key
space still works but not enter
can confirm it is the appearance base-select on select that causes this
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
::picker() doesn't seem like it's animateable
Tried this on mobile and it seems you can't close the dropdown when clicking on select button itself again
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
i got animation to work with starting style tho it doesn't show any exit animation for some reason
got it to work by including display propety into transition
i think this is enough playing around for me
Looks good 👍