Как сделать пользовательский интерфейс более загрузочным?

Я использую ui-select поля выбора и обычные поля выбора начальной загрузки рядом , и я хочу, чтобы они выглядели точно так же. Точнее, я хочу, чтобы поля выбора пользовательского интерфейса выглядели как загрузочные.

Я заметил несколько отличий:

  1. Форма стрелки.
  2. Поле выбора пользовательского интерфейса становится серым при наведении курсора. Загрузочная коробка не работает.
  3. Внутри поля выбора пользовательского интерфейса есть большое расстояние между параметрами, а сбоку есть поле. Отступ должен быть только при активации функции группировки (и даже в этом случае имена групп не должны иметь отступа).
  4. Поле выбора пользовательского интерфейса фокусируется при выборе параметра или при открытии поля и последующем щелчке. Я имею в виду уродливый монотонный синий фокус, а не синий размытый фокус начальной загрузки. В поле выбора пользовательского интерфейса есть и то, и другое.
  5. Щелчок правой кнопкой мыши по параметру в поле начальной загрузки выбирает его. Щелчок правой кнопкой мыши по параметру в поле выбора пользовательского интерфейса открывает меню.
  6. Стрелка окна выбора пользовательского интерфейса исчезает, когда окно открыто.
  7. Есть ли другие различия, которые вы замечаете?

Я бы хотел, чтобы он работал как с функцией группировки, так и без нее.

Некоторые из упомянутых выше функций действительно трудно заметить, поэтому любой ответ, охватывающий большую часть материала, хорош.

Вот ссылка на официальный ui-select плункер.

Большое спасибо!


css twitter-bootstrap ui-select
person Ella Sharakanski    schedule 22.05.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Не идеально, но вот некоторый прогресс:

.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. При открытии окна выбора пользовательского интерфейса и последующем щелчке по нему не должно быть синего свечения.
  2. При открытии окна выбора пользовательского интерфейса оно имеет синее свечение, а при выборе параметра свечение исчезает, а затем появляется снова. Так не должно быть, свечение должно просто остаться.
  3. Щелчок правой кнопкой мыши на поле выбора пользовательского интерфейса создает голубоватое свечение без синей границы. Этого никогда не должно случиться. Свечение должно быть синим, и граница тоже должна быть синей.
person Ella Sharakanski    schedule 24.05.2015
comment
ты избавился от синего свечения? - person DogCoffee; 15.01.2017

arrow_upward
0
arrow_downward

Вот способ убрать синее свечение

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