如何让ui-select多bootstrap？

Question

我并排使用 ui-select select-boxes 和常规 bootstrap select-boxes，我希望它们看起来完全一样。更准确地说，我希望 ui-select 框看起来像 bootstrap 框。

我注意到一些不同之处：

箭头的形状。
悬停时ui-select框变灰。 bootstrap 框没有。
ui-select框内的选项之间有很多间距，并且边上有空白。只有当分组功能被激活时才应该有边距（即使这样组名也应该没有边距）。
选择选项或打开框然后单击离开时，ui-select 框会聚焦。我指的是丑陋的单调蓝色焦点，而不是蓝色模糊 bootstrap 焦点。 ui-select 框都有。
右键单击 bootstrap 框中的一个选项 select 即可。右键单击 ui-select 框中的选项会打开一个菜单。
ui-select箱子打开时箭头消失
您还注意到其他不同之处吗？

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

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

这是给官方 ui-select plunker 的 link。

非常感谢！

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; 在侧面添加了一个小箭头，使其看起来像一个 select 框）。

这里只解决了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多bootstrap？

How to make the ui-select more bootstrap?

css

twitter-bootstrap

ui-select