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

