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.
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
You can access the option elements inside the select via the dom and style them there. In most browsers on a Mac (which that looks like?) those selects are actually implemented as separate windows - not even part of the browser, so you’re going to struggle to access them directly.
Yeah I was thinking on an OS level those close when the focus changes.
Can you elaborate on that? What do u mean by OS level?
I really people to be specific do I know these things exactly.
I think Firefox should be able to keep the dropdown menu focused somehow, since its essentially HTML inside the browser engine, and its possible to disable pop hiding for Firefox UI popups in the browser toolbox. The browser toolbox can’t inspect page HTML though, only Firefox UI elements.
I don’t know if your assertions are right or if mine are either. But my understanding is that dropdowns are an OS feature and consequently the OS is responsible for managing the open and close state of dropdowns, depending on focus. Again, I’m not sure and I’m not expert. It’s just what it’s looked like to me as an observer.
Well I’ll note, I’m on Mac its’s not a native dropdown menu, this is what it looks like:
.
I’m on Mac and that’s not a native dropdown menu, this is what it looks like:
.
