css - 为什么 Bootstrap 表单选择控件看起来有点奇怪？

Question

所需的代码非常简单，如 w3schools 所示:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_select&stacked=h

只需添加一个标签和一个“form-control”类

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

但是结果不一致；有些边框是黑色的，有些是透明的。我觉得很奇怪。我的时尚感刚刚好吗？

查看 bootstrap 文档，它看起来是正确的方法。它应该看起来像那样吗？

例如，我尝试添加一个类并为其设置样式:

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control dropdown" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

CSS:

.dropdown {
border: transparent !important
}

没有影响。你怎么看？

提前致谢

Answer 1

您遇到了 Internet 的一个非常有趣的功能 - 原生表单控件。

您遇到的边框是 internet explorer/edges 渲染系统的系统样式。这不一定是用 CSS 设计的。

您可以使用 CSS/JavaScript 重新创建下拉菜单，但您会失去该特定控件固有的许多功能。

例如，当您在移动设备上时，选择/选项控件有时会变成视口(viewport)底部的旋转轮/rolodex。当用户尝试通过键盘选择元素时，您也会失去键盘/自动完成功能(我住在明尼苏达州，当出现状态下拉列表时，我键入 M -> 选择缅因州，我 -> 选择 (Mi)nnesota。

当开发人员重建具有自动完成功能的此类控件时，往往会发生以下情况:我键入 M -> Maine，I -> Idaho。

最终您选择做什么取决于您，但消除一些奇怪的边框实际上可能会导致用户体验不如顺其自然。

顺便说一句，大多数浏览器以不同的方式实现选择/选项控件。请参阅以下三种不同的浏览器: