CODEWITHSUNDEEP
csstwitter-bootstrapui-select
Ella Sharakanski
Ella Sharakanski

Reputation: 2773

How to make the ui-select more bootstrap?

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!

Upvotes: 0

Views: 2212

Answers (2)

DogCoffee
DogCoffee

Reputation: 19946

Here is the way to remove the blue glow 

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

Upvotes: 0

Ella Sharakanski
Ella Sharakanski

Reputation: 2773

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.

Upvotes: 2

Related Questions