Don’t forget about iOS and Android! They both have their native select alternatives, which is largely the reason why you don’t have full control over <select>
from CSS alone.
Look into a JS plugin like https://harvesthq.github.io/chosen/ and just style that the way you want to make sure your solution replicates across desktop and mobile.
Nice feature but the UI needs improving ...
I have a feeling the app does not get tested enough on non-huge-desktop screens, like a macbook 13", otherwise situations like this screenshot would not occur. This is not the first time that I notice the app not being tested on smaller screens, for example dashboard/#/portfolio on a 13$ looks like this ... the actual message "Open the dashboard to explore other DAAs. ..." is 3 miles below the fold.
Putting text fields with "start typing" is just bad UX ... you should give people all available options in a dropdown by using https://harvesthq.github.io/chosen/, this will still have the option to search but others can scroll through the list.
Sorry, wasn't sure how to explain it properly. I notice there are some tools that transform select dropdown input into divs /w js like https://harvesthq.github.io/chosen/. So I thought there might be something like that for scrollbars. I do understand that I may need a Carousel with a customizable scrollbar if that makes more sense.
First, great work and thank you. Had a couple of enhancement suggestions.
1) https://harvesthq.github.io/chosen/ provides a slick select list with filtering. For example, would be super useful to search for "ev" when trying to find "that materia" that has 5% evade...
2) Use that free cell at the top for "magic evade"
Thanks again!
It isn't possible with pure CSS as others said already. But you can take a look here: https://harvesthq.github.io/chosen/ It's the tool I use for styling dropdowns myself. It gives you a nice look out of the box and a lot of features you can use. You can simply override the default look with css to create your own look that fits to the rest of your page.