Firefox

20428 readers

10 users here now

/c/firefox

A place to discuss the news and latest developments on the open-source browser Firefox.

Rules

1. Adhere to the instance rules

2. Be kind to one another

3. Communicate in a civil manner

Reporting

If you would like to bring an issue to the moderators attention, please use the "Create Report" feature on the offending comment or post and it will be reviewed as time allows.

founded 5 years ago

MODERATORS

k_o_t@lemmy.ml

golden_zealot@lemmy.ml

How can I keep dropdown menus open while inspecting them in dev tools? (lemmy.world)

submitted 2 years ago by TheTwelveYearOld@lemmy.world to c/firefox@lemmy.ml

15 comments fedilink hide all child comments

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 are viewing a single comment's thread
view the rest of the comments

[–] donnachaidh@lemmy.dcmrobertson.com 1 points 2 years ago (2 children)

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

[–] TheTwelveYearOld@lemmy.world 1 points 2 years ago (1 children)

Read this comment. I can select the dropdown items with the Browser Toolbox and add CSS to them.

[–] donnachaidh@lemmy.dcmrobertson.com 1 points 2 years ago

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