The dropdown menu is here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
I’d like to change the CSS of the dropdown elements in a <select> element in dev tools, but I can’t make the dropdown stay open.
this post was submitted on 28 Jul 2023
25 points (96.3% liked)
Firefox
17884 readers
126 users here now
A place to discuss the news and latest developments on the open-source browser Firefox
founded 4 years ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
view the rest of the comments
You can't style options, as they're browser-dependent and there isn't an agreed standard. You'd have to use a replacement, which provides the functionality with other components.
Then, to keep it open, you should be able to toggle classes and states in the inspector. I'm Firefox, it's above the style inspector, labelled as .cls and :hov, I believe (I'm on mobile at the moment).
Read this comment. I can select the dropdown items with the Browser Toolbox and add CSS to them.
You can a bit, but that will be limited and will differ by browser. Look at something like this to do it: https://medium.com/@ross.angus/styleable-select-box-replacement-in-pure-css-and-semantic-html-1f38a400b285