Currently, I am in the process of updating a website's mobile device style sheet and utilizing the built-in DevTools within Chrome for testing. I'm working with Chrome version 53.0.2785.116 on a Windows OS.
The issue I am facing is that when using DevTools, the expanded section of the <select> elements (the part that typically drops down) appears completely off-center and as a black box.
Initially, I suspected it was a styling problem, but after creating a new .html file and inserting a simple <select> element, I encountered the same issue.
I understand that on an actual device, the dropdown section displays differently at the bottom of the screen with options presented in a Rolodex animation format. Unfortunately, this prevents me from effectively testing the select menu...
Is there a workaround for this situation?
Here is the code snippet:
<!DOCTYPE html>
<html>
<title></title>
<head>
</head>
<body>
<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
</select>
</body>
</html>
Below is a screenshot illustrating the problem: https://i.sstatic.net/eO6sl.png