0

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

我注意到一些不同之处：

  1. 箭头的形状。
  2. 悬停时 ui-select 框变为灰色。引导框没有。
  3. ui-select 框内的选项之间有很多间距，并且侧面有一个边距。只有在激活分组功能时才应该有边距（即使这样，组的名称也应该没有边距）。
  4. 选择选项或打开框然后单击离开时，ui-select 框将获得焦点。我指的是丑陋的单调蓝色焦点，而不是蓝色模糊的引导焦点。ui-select 框两者都有。
  5. 右键单击引导框中的选项将其选中。右键单击 ui 选择框中的选项会打开一个菜单。
  6. ui-select框的箭头在框打开时消失。
  7. 您是否注意到其他差异？

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

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

这是官方plunker的链接。ui-select

非常感谢！

4

2 回答 2

2

一点也不完美，但这里有一些进展：

.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。此外，还有一些问题：

  1. 当打开 ui-select 框然后单击离开时，它应该没有蓝光。
  2. 打开UI选择盒时，它具有蓝色的光芒，选择选项时，光芒消失，然后再出现。它不应该这样做，辉光应该停留在那里。
  3. 右键单击 ui-select 框会创建一个没有蓝色边框的蓝色发光。这不应该发生。发光应该是蓝色的，边框也应该是蓝色的。
于 2015-05-24T17:57:44.793 回答
0

这是去除蓝光的方法

.ui-select-match.btn-default-focus {
    outline: 0;
    box-shadow: none;
}
于 2017-01-16T02:34:54.057 回答