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.