this post was submitted on 28 Jul 2023
26 points (100.0% liked)

Firefox

20639 readers
188 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
 

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
[–] dan@lemm.ee 3 points 2 years ago* (last edited 2 years ago)

Did I say it was a native dropdown? Nope. I said it was implemented as a separate window.

You can demonstrate that by trying to take a screenshot of the whole window when you have an open dropdown (cmd + shift + 4, then press space to select a window), and you'll see the contents of the dropdown aren't in the resulting screenshot (but are if you select an area or screenshot the whole screen).

Regardless, the fix is the same: use the inspector tab to navigate to the option element inside the select in the DOM itself, you can manipulate the elements there, although if you want to change the styling supported CSS styles are extremely limited. If you really want to control the appearance of a select element you're probably going to have to render them yourself.