Question

我并排使用ui-select选择框和常规引导选择框，我希望它们看起来完全一样。更准确地说，我希望ui-select框看起来像引导程序。

我注意到了一些差异：

箭头的形状。
ui-select框在悬停时变为灰色。引导盒不是。
ui-select框内的选项之间有很多间距，边上有一个边距。激活分组功能时应该只有边距（即使这样，组的名称也没有边距）。
在选择选项或打开框然后单击时，ui-select框会被聚焦。我指的是丑陋的单调蓝色焦点，而不是蓝色模糊的自举焦点。 ui-select框同时包含。
右键单击引导程序框中的选项可选择它。右键单击ui-select框中的选项可打开一个菜单。
当盒子打开时，ui选择框的箭头会消失。
您注意到还有其他差异吗？

我希望它既可以使用分组功能，也可以不使用分组功能。

上面提到的一些功能真的很难被注意到，所以任何覆盖大部分内容的答案都是好的。

此处是ui-select官方d3.json(url, callback)人员{/ 3}}。

非常感谢！

Answer 1

根本不完美，但这是一些进展：

.bootstrap .ui-select-bootstrap .ui-select-toggle {
  cursor: default;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

.bootstrap .ui-select-bootstrap input[type="text"] {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

.bootstrap .ui-select-bootstrap .ui-select-toggle .caret {
  display: none;
}

.bootstrap .ui-select-bootstrap .ui-select-match .btn-default,
.bootstrap .ui-select-bootstrap .ui-select-match .btn-default:hover {
  color: #555;
  background-color: initial;
  border-color: #ccc;
}

.bootstrap .ui-select-bootstrap .ui-select-match {
  outline: 0 none;
  outline-offset: 0;
}

.bootstrap .ui-select-bootstrap .btn-default-focus .btn-default,
.bootstrap .ui-select-bootstrap .btn-default-focus .btn-default:hover {
  border-color: #66afe9;
  background-color: #fff;
  color: #555;
}

.bootstrap .ui-select-bootstrap .ui-select-choices-row-inner,
.bootstrap .ui-select-bootstrap .ui-select-choices-group-label {
  cursor: default;
}

要使用它，请将ui-select放入<div class="bootstrap">。它在Chrome中效果最好，因为-moz-appearance: menulist;没有做任何事情（-webkit-appearance: menulist;在侧面添加一个小箭头，使其看起来像一个选择框）。

这只解决了1,2,4和6.此外，还有一些问题：

打开ui-select框然后点击它时，它应该没有蓝光。
打开ui-select框时，它会发出蓝光，当选择一个选项时，发光消失然后重新出现。它不应该这样做，发光应该留在那里。
右键单击ui-select框会创建一个没有蓝色边框的蓝色发光。这绝不应该发生。发光应为蓝色，边框也应为蓝色。

Answer 2

以下是移除蓝光的方法

.ui-select-match.btn-default-focus {
    outline: 0;
    box-shadow: none;
}

如何使用ui-select更多引导程序？

2 个答案: