html - 为什么 Chrome 会在设备模式下更改输入/选择框？

Question

在 Chrome 中(甚至在 v51 上)有一段时间以来就有这个“问题”。启用设备工具栏后，选择框和提交按钮失去了样式，只显示文本。使用空 fiddle :https://jsfiddle.net/qmfws6mq/

<select>
<option>Option 1</option>
</select>
<input type="text" name="test" value="Text box">
<input type="submit" value="Submit button">

如果您无法重现问题，这里有两个屏幕截图:http://imgur.com/a/H6wGA 这发生在我的至少两台电脑上(但仅限于 chrome)。

这是如何运作的？这是错误吗？

Answer 1

一个解决方案是为输入创建一个新的临时样式(在浏览器中)，添加缺失的边框。

在检查元素时，“样式”面板允许创建自定义样式(如下面的屏幕所示):

创建一个样式，在这些输入上放置一个边框，这将至少在临时状态下解决问题:

input {
    border: 1px solid #999;
}