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

Question

有一段时间在Chrome中出现这个'问题'（即使是在v51上）。启用设备工具栏后，选择框和提交按钮将丢失其样式并仅显示文本。使用空小提琴：xop/mtom parse

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

如果您无法重现此问题，可以使用以下两个屏幕截图：https://jsfiddle.net/qmfws6mq/ 这至少发生在我的两台计算机上（但仅限于Chrome）。

这是如何工作的？这是一个错误吗？

Answer 1

一种解决方案是为输入创建一个新的临时样式（在浏览器中），这会添加缺少的边框。

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

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

NVARCHAR