Clever Geek Handbook

How to make ui-select more bootable?

I use ui-select select-boxes and regular boxbots, side by side, and I want them to look exactly the same. More precisely, I want the ui-select fields to look like bootable.

I noticed a few differences:

  • Arrow shape.
  • The ui-select window turns gray during hover. In the botstrap block, no.
  • The ui select box has a lot of spacing between options and there is a margin on the side. When the grouping feature is activated (and even then the group names should not have any field) there should only be a margin.
  • The ui selection box is focused when you select an option or when you open a window and then click. I mean the ugly monotone blue focus, not the blue blurry bootstrap orientation. The ui select box has both.
  • Right-clicking an option in the bootstrap window selects it. Right-clicking on an option in the ui selection window opens a menu.
  • The ui selection window arrow disappears when the window is open.
  • Is there any other difference that you noticed?

I would like it to work with or without the grouping function.

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

Here's a link to the official ui-select

plunker.

Thank you so much!

0


source to share


2 answers


Not quite perfect, but here's the 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, place ui-select

in <div class="bootstrap">

. It works best in chrome as -moz-appearance: menulist;

it does nothing ( -webkit-appearance: menulist;

adds a little arrow on the side to make it look like a select box).



This only resolves 1, 2, 4, and 6. Additionally, there are a few more problems:

  • When opening the ui selection window and then clicking, it should not have a blue glow.
  • When the ui-select window opens, it has a blue glow, and when the option is selected, the glow disappears and then reappears. It shouldn't do this, the glow should just stay there.
  • Right clicking on the ui-select window creates a blue-blue glow with no blue border. It should never be. The glow should be blue and the border should also be blue.
+2


source


Here is a way to remove the blue glow



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


source






More articles:


All Articles