I do turn off all the css attributes for a select
item in Safari, but it will still not look at a plain select
in in Safari, why?
I would have the first, I did try those, but not brings closer to the upper one:
style={{
padding: '10px',
boxSizing: 'border-box',
fontSize: '15px',
display: 'inline-block',
appearance: 'auto',
}}
2
Answers
I suggest you should create a custom dropdown to handle such request.
This approach completely hides the default
select
element and creates a custom element (e.g., a<div>
) with your desired styles. You’ll need additional HTML and JavaScript to manage the functionality of the dropdown list (opening, closing, selecting options).I will provide you with two approaches
1. If you do not care about the drop down menu styling
You can use
appearance: none
and set your styling that will work the same on all browserslike this
2. If you do care about the drop down menu styling
you will need to create a drop down menu to hold your list, that can be toggled with javascript on click
you can in both approaches insert a caret-icon to replace the dot of course. and toggle on it a class that will rotate it 180 degrees or something.