Skip to main content
LaurentMT1
Participant
August 19, 2025
Solved

Support of SELECT HTML tags broken in browser

  • August 19, 2025
  • 6 replies
  • 332 views

It seems that the support of Select HTML tags is broken in latest versions of browser (problem detected on OS v79, browser v40.1).  

When user clicks on a Select control, the browser briefly displays the list associated to the control but it immediately disappears. 

The issue can be reproduced with many different websites (e.g.  https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup , https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select )

This topic has been closed for replies.
Best answer by VirtuallyARealDinosaur

Hello again!

I was informed that there should be a fix for this in browser version 40.2.

If you continue to experience this after the version update, please feel free to respond to me here.

6 replies

VirtuallyARealDinosaur
VirtuallyARealDinosaur
Community Manager
August 20, 2025

Hello,

Are you still experiencing this issue?
Can you please provide some steps to reproduce the issue?

Thanks!

LaurentMT1Author
Participant
August 30, 2025

Sure. You can reproduce it with the select displayed on this web page: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

Open the url with a browser on any computer and you'll see a <select> that is working (you can click on the control and select an entry).

Then open the same url with the quest browser and try to repeat the same operation.

VirtuallyARealDinosaur
VirtuallyARealDinosaurAnswer
Community Manager
September 4, 2025

Hello again!

I was informed that there should be a fix for this in browser version 40.2.

If you continue to experience this after the version update, please feel free to respond to me here.

jameswood32
jameswood32
Inspiring
August 27, 2025

Issue:
HTML <select> dropdown is not rendering properly or appears broken in some browsers (e.g., not clickable, styled incorrectly, or options not showing).

Possible Causes & Fixes:

CSS Overrides

Some global CSS or framework (like Bootstrap, Tailwind, or Material UI) might override the native styles of the <select> element.

Fix: Inspect with DevTools and look for conflicting styles. Try resetting styles with:

select {
  all: unset;
  appearance: auto;
}


Browser Compatibility or Bugs

Some versions of browsers (especially mobile Safari, Firefox, or Edge) may have rendering quirks.

Fix: Test in multiple browsers and update to the latest versions. For Safari issues, consider using -webkit-appearance.

Missing or Malformed HTML

<option> tags not correctly closed or nested inside the <select>, or select placed inside invalid containers.

Fix: Ensure correct structure:

<select name="example" id="example">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>


JavaScript/Framework Conflicts

JavaScript libraries or frontend frameworks (like React, Vue, or Angular) might interfere with rendering.

Fix: Make sure you're not mutating the DOM in a way that breaks the <select> state. In React, bind value and onChange properly.

Custom Styling Tools

If you're using custom UI libraries (e.g., Tailwind UI, Material UI), they often replace <select> with a custom dropdown component.

Fix: Ensure you're using their component correctly or fallback to native <select> when needed.

 

LaurentMT1Author
Participant
August 30, 2025

The problem I'm reporting can be reproduced with a page as simple as this one

<html>
  <head></head>
  <body>
    <form>
      <select name="pets" id="pet-select">
        <option value="">--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
        <option value="parrot">Parrot</option>
        <option value="spider">Spider</option>
        <option value="goldfish">Goldfish</option>
      </select>
    </form>
  </body>
</html>

 

Terms & ConditionsAccessibility statement