为什么引导形式选择控件看起来有点不可思议?

问题描述 投票:2回答:1

所需要的代码非常简单如图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>

但结果是不一致的;一些边框是黑色的,有些是透明的。它看起来怪我。是我的时尚感,就在?

Images showing inconsistent border on dropdown menus

检查出引导文档看起来正确的方法来做到这一点。难道这就是像她那样?

我试图例如添加类,并设置样式:

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

没有效果。你怎么看?

提前致谢

css twitter-bootstrap forms select
1个回答
1
投票

你已经打了互联网的一个非常有趣的功能 - 原生的表单控件。

您遇到的边界是什么似乎为Internet Explorer /边缘渲染系统的系统造型。这可不一定与CSS样式。

你可以重新使用CSS / JavaScript的下拉菜单,但你会失去了很多的固有附带了特定的控制功能。

例如,当你是在移动设备上选择/选项控制有时变得在您的视口的底部旋轮/名片盒。当用户尝试通过键盘(我住在明尼苏达州,当与状态下拉呈现I型M键选择一个项目你也失去了键盘/自动填充功能 - >选择缅因州,我 - >选择(MI)nnesota。

当开发商重建这种类型的控制与自动填充功能是什么往往发生的是我输入M - >缅因州,我 - >爱达荷州。

最终,你选择做什么是你的,但消除一些边境古怪的实际上可能导致用户体验不只是让它不那么强劲。

顺便说一句,大多数浏览器不同的方式实现选择/选项控制。见下面三种不同的浏览器:

© www.soinside.com 2019 - 2024. All rights reserved.