Как стилизовать Select и выбранный элемент добавить в список?

Question

[DeniSidorenko]

Всем привет, на повестке дня встало 2 вопроса. Начнем с первого.

Изображение

Как сделать вот этот треугольник, ибо не понимаю к какому классу, ид или еще что то обратиться?

Второй вопрос. Как мы все знаем можно задавать multiple и select будет выбирать несколько вариантов. Дело в том что мне это не требуется . К примеру: после выбора одного элемента списка городов, текст «Все города» заменяется на выбранный город, после выбора второго и последующих текст заменяется на «Выбрано городов: n»

P.S Как убрать стрелочку оставив тем самым только текст у select

Заранее спасибо

Comments

[Ankhena]

1.

Как сделать вот этот треугольник, ибо не понимаю к какому классу, ид или еще что то обратиться?

По картинке мы тоже вряд ли угадаем, что там у вас за класс.
В общем случае так: https://habrahabr.ru/post/142534/

2. Пишите JS с условиями.

3. css-live.ru/articles-css/spisok-psevdoelementov-dl...
Простой вариант: наложить на стрелку элемент цвета фона. Если это именно select, а не стилизация с помощью списков или div.

[Nathan Stark]

по первому вопросу:

div{
position: relative;
}
div::before{
content: '';
    display: block;
    width: 0px;
    height: 0px;
    top: 0;
    left: 0;
    position: absolute;
    border-left: 5px;
    border-right: transparent;
    border-top: 5px;
    border-bottom: transparent;
    border-style: solid;
    transform: rotate(45deg);
}

[DeniSidorenko]

Ankhena W: Спасибо, по второму вопросу тоже думал через JS сделать

[DeniSidorenko]

Nathan Stark: Спасибо за уделенное время, обязательно попробую

Answer 1

[sergey]

1) треугольник сделать очень просто, с помощью :before и :after, повесив их на выпадающий список, обычно это ul.dropdown (имеется ввиду что Вы используете плагин для стилизации select)
хотя бы этот jquery-form-styler/
2) не понятно что Вы хотите узнать.

PS
arrow display: none
Но прежде чем гадать предоставьте код в jsfiddle

Comments

[DeniSidorenko]

Плагин не использую. Думал мб есть другой способ это сделать.

По поводу второго вопроса. Для select есть атрибут multiple когда можно выбрать несколько вариантов. Если вы посмотрите на первое изображение где выбор городов мне надо сделать примерно так. Пользователь нажал на один город и где все города меняется на город, выбрал еще один и он добавляется

[sergey]

DeniSidorenko: так Вы просто не стилизируете select, это не возможно, второе то о чем Вы пишите это стандартная работа select, используйте jqueryFormStyler

Answer 2

[PiggyPig]

Насчет убирания и создания стрелок здесь:

https://jsfiddle.net/4Lz6uLn9/

А про multiple-список не понял. Если Вам это не нужно, то уберите у select'a "multiple".

Answer 3

[Андрей]

Посмотрите ещё такой работает со стандартной разметкой