How to make <options> display below <select> dropdown title using just html and css

Question

I have a html/css dropdown using <select> and <option> elements (not <ul>, <li>). I would like to style the dropdown options so that when you click to open the dropdown the list of options appear below the title of the dropdown (the bit you see before you click to open it) not on top of or obscuring that title.

I know that there are limitations to styling dropdowns using <select> and <options> with just html/css but I wanted to know if it was possible to achieve this without having to go down the custom dropdown route.

I believe that this may vary from browser to browser but I am having the issue on Chrome on a Mac.

<select name="numbers"> 
  <option value="1">1</option> 
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Currently when the dropdown is closed you would see '1' and when you open it you can no longer see the selected number 1, you can only see the new list of options 1,2,3 which is directly on top of where the 1 for the closed dropdown used to be. I would like it so that you can always see your selected choice e.g. 1 (whether the dropdown is open or closed) and when you do open the dropdown your list of options displays beneath the currently selected choice not obscuring it.

Answer 1

I have had a similar problem in the past and I can tell you I have not found any answers, believe me. If you open "select dropdowns" on a mac, the options appear OVER the input. If you do the exact same thing with the exact same code on a windows pc, the dropdown options appear below the input, which is what you want. I strongly advise you to move on to another problem as the solution to your simple problem is much more complicated than it might seem...