引导表单选择控件为什么看起来有些奇怪？

Question

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

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

只需添加标签和一类“表单控件”

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

但是结果不一致；有些边框是黑色的，有些边框是透明的。在我看来很奇怪。我的时尚感刚刚消失吗？

签出引导文档似乎是正确的方法。应该看起来像这样吗？

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

<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 / Edge Rendering System的系统样式。不一定可以使用CSS设置样式。

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

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

当开发人员使用自动完成功能重建这种类型的控件时，发生的趋势是我键入M->缅因州，我->爱达荷州。

最终，您的选择完全取决于您自己，但是消除某些边界怪异现象实际上可能会导致用户体验不如让它那样健壮。

顺便说一句，大多数浏览器以不同的方式实现选择/选项控件。请在下面查看三种不同的浏览器：