如何让ui-select更多的bootstrap？ [英] How to make the ui-select more bootstrap?

问题描述

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

我注意到一些区别：

1. 箭头的形状。


2. 当悬停时，ui-select框变为灰色。


3. 在ui-select框内的选项之间有很多间距，边上有边距。在分组功能被激活时，应该只有边距（即使组的名称不应有边距）。


4. 当选择一个选项时，打开框，然后点击离开。我指的是丑陋单调的蓝色焦点，而不是蓝色的模糊的引导焦点。


5. 右键单击引导框中的选项将选中它。右键单击ui-select框中的选项可打开菜单。


6. 打开框时，ui-select框的箭头将消失。


7. 您注意到其他差异吗？

我想使用分组功能， / p>

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

以下是链接官方 ui-select code> plunker。

非常感谢。

解决方案

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

  .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外观：menulist; 在边上添加一个小箭头，使其看起来像一个选择框）。

这只解决了1,2,4和6。一些更多的问题：

1. 打开ui选择框，然后点击它应该没有蓝色光芒。


2. 当打开ui-select框时，它有一个蓝色的光芒，当选择一个选项时，发光消失，然后重新出现。


3. 右键单击ui-select框创建一个没有蓝色边框的蓝色发光。这应该永远不会发生。灯光应为蓝色，边框也应为蓝色。

I'm using ui-select select-boxes and regular bootstrap select-boxes side by side, and I want them to look exactly the same. More precisely, I want the ui-select boxes to look like the bootstrap ones.

I noticed a few differences:

1. The shape of the arrow.
2. The ui-select box turns grey when being hovered. The bootstrap box doesn't.
3. There's a lot of spacing between options inside the ui-select box and there is a margin on the side. There should only be margin when the grouping feature is activated (and even then the names of the groups should have no margin).
4. The ui-select box is focused when choosing an option or when opening the box and then clicking away. I'm referring to the ugly monotonic blue focus, not to the blue blurry bootstrap focus. The ui-select box has both.
5. Right-clicking an option in the bootstrap box selects it. Right-clicking an option in the ui-select box opens a menu.
6. The arrow of the ui-select box disappears when the box is open.
7. Is there any other difference you notice?

I'd like it to work both with the grouping feature and without it.

Some of the features mentioned above are really hard to notice, so any answer covering most of the stuff is good.

Here's a link to the official ui-select plunker.

Thanks a lot!

解决方案

Not perfect at all, but here is some progress:

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

To use it, put the ui-select in a <div class="bootstrap">. It works best in chrome since the -moz-appearance: menulist; doesn't do anything (-webkit-appearance: menulist; adds a little arrow on the side to make it look like a select box).

This only solves 1, 2, 4 and 6. Also, there are some more problems:

1. When opening the ui-select box and then clicking away it should have no blue glow.
2. When opening the ui-select box it has a blue glow, and when choosing an option the glow disappears and then reappears. It shouldn't do so, the glow should just stay there.
3. Right clicking the ui-select box creates a blue-ish glow with no blue border. This should never happen. The glow should be blue and the border should be blue too.

这篇关于如何让ui-select更多的bootstrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！