Как реализовать такую структуру?

Question

[DeniSidorenko]

Добрый день. Подскажите можно реализовать такое без сторонних плагинов. Я вижу тут только select, есть другие предложение?

Answer 1

[Иван GiBSON]

Ну дак обычнм селектом и сделать

1. Добавить бордер.
   
2. Отключить стрелочку
   

   -webkit-appearance: none;
      -moz-appearance:    none;
      appearance:         none;

   
   
   
   
3. Добавить background c вашей стрелкой
   
4. Остальное по вкусу
   

Comments

[George Postoronca]

не Cross-browser
Can I use

[Иван GiBSON]

George Postoronca: для ие 11- есть другое свойство. Могли бы и сами глянуть ;)

select::-ms-expand{
    display: none;
}

[George Postoronca]

Иван GiBSON: да но IE9 ?

[Иван GiBSON]

George Postoronca: оно же не живое уже года 2 точно, не тыкайте его уже палочкой. А серьезно ну тогда костыляйте как предложил KorniloFF

[George Postoronca]

да знаю но он еще в силе! то есть я всегда делаю от IE9+ хоть мне это и не нравится!

[Иван GiBSON]

George Postoronca: я думаю для него можно и пожертвовать эстетикой, ничего страшного не произойдет, хотя дело то все равно ваше. Я только предложил то решение которое сам использую

[George Postoronca]

короче здесь уже зависит от проекта!

Answer 2

[Павел Корнилов]

Еще вариант - сверстать обычным дивом с фоновым изображением стрелки. А по клику показывать скрытую часть.

Comments

[Иван GiBSON]

Пользователи мобильных устройств и клавиатур вам спасибо не скажут

[Павел Корнилов]

Иван GiBSON:
Согласен. Но не все же сайты имеют адаптивный дизайн.
Зато при этом варианте намного шире возможность реализации.

[Иван GiBSON]

KorniloFF: А причем здесь адаптивность, даже без нее с телефона вы замаетесь пользовать кастомный селект

[Павел Корнилов]

Иван GiBSON: Я не копал вопрос, но наверняка есть способы эмуляции броузерного селекта. Ну не может их не быть.
На вскидку решение - использовать CSS media для отображения скрытых данных на весь экран в мобильных устройствах.