Chrome DevTools 不适用于 Select 元素答案

【问题标题】：Chrome DevTools not working with the Select elementChrome DevTools 不适用于 Select 元素
【发布时间】：2016-10-08 05:01:04
【问题描述】：

我正在为网站修复移动设备的样式表，并且我正在使用 Chrome 中内置的 DevTools 进行测试。我现在在 Windows 操作系统上使用 Chrome 版本 53.0.2785.116。

我的问题是，当我使用 DevTools 时，<select> 元素的扩展部分（通常下降的部分）完全偏离中心并显示为黑框。

起初我以为样式有问题，但我创建了新的 .html 文件并简单地在页面中添加了一个 <select> 元素并发现了同样的东西。

我意识到在实际设备上，下拉部分的显示方式不同（作为设备底部的一个部分，带有 Rolodex 类型动画中的选项）；但是，我无法使用选择菜单进行测试...

有没有办法解决这个问题？

这是我的代码：

<!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>

这里是问题的截图：

【问题讨论】：

Simple select tag with options not working on Chrome的可能重复

标签： html css

【解决方案1】：

出于测试目的，您可以将设备类型从移动设备更改为桌面设备（触摸）。这将使您能够解决 select 元素和移动仿真的问题。

要启用这些选项，请通过纠正并检查您所在的页面或按 f12 打开您的开发人员工具。点击旋转图标右侧的菜单图标（3 个点）（右上角的 chrome 下方的菜单图标）-编辑：查看红色圆圈中的图像点。 p>

选择显示设备类型和显示设备像素比
从第一个下拉列表中选择响应并输入您的其他设备值

为了避免一直这样做，您可以创建自定义设备配置文件

在第一个下拉列表中选择编辑，然后选择添加自定义设备
注意：只有在您已经创建了自定义设备类型时才会显示编辑，请参阅下面的编辑了解如何首次创建自定义设备。

编辑： 对于适用于 Windows 的 Chrome 版本 53.0.2785.143，您需要执行以下步骤来完成添加自定义设备类型：

导航到您要测试的页面并按 F12 打开开发人员工具
按 F1 打开开发者工具设置
在设置菜单中选择设备
添加与您要测试的设备具有相同配置详细信息的自定义设备，并按照上述说明进行操作。

【讨论】：

谢谢。我不知道您使用的是哪个版本的 Chrome，但有关如何添加自定义设备的说明与我的 Chrome 版本不一致。我必须：打开开发人员工具，单击开发人员工具中的菜单（“...”按钮），单击设置，从设置菜单中选择设备，然后从那里开始。这对我帮助很大。非常感谢
很高兴能提供帮助，奇怪的是我也在 Windows 上使用最新版本的 chrome：53.0.2785.143 想知道它们为什么不同
@Frinavale 认为因为我已经有一个自定义设备集，所以我可以选择在第一个下拉菜单中单击编辑，您可以在其中选择设备，它会将您直接带到该页面。