Изображение, которое становится списком выбора на телефоне

Question

Изображение, которое становится списком выбора на телефоне

0

Есть ли способ иметь изображение на веб-странице, которое при нажатии на него отображает окно выбора (также называемое "колесо") на телефоне? В принципе, чтобы изображение заменило отображение раскрывающегося списка по умолчанию. Я бы использовал обычный снимок для рабочих столов, но изображение на мобильных устройствах.

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

Cheryl Yaeger 21 окт. 2013, в 23:02

Источник

0

Я пробовал фоновое изображение, но не прозрачность. Решение ниже работает.
Cheryl Yaeger 31 окт. 2013, в 15:52

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Я пробовал фоновое изображение, но не прозрачность. Решение ниже работает.

Michael Zaporozhets · Accepted Answer · 2013-10-22T02-34-00.000Z

Да, это определенно возможно.

Все, что вам нужно сделать, это создать контейнер для выбора, установить его непрозрачность на 0 а затем дать контейнеру фоновое изображение.

Пример кода:

HTML

<div class="image">
    <select>
        <option>test</option>
        <option>test</option>
        <option>test</option>
        <option>test</option>
    </select>
</div>

CSS

.image { background-image: url(http://eofdreams.com/data_images/dreams/cat/cat-06.jpg); background-size: cover; width: 100px; height: 100px;overflow: hidden; }
select { opacity: 0; height: 250px; font-size: 50px; display: inline-block; margin: 10px; border: 0px; background: transparent; }

Пример: http://jsfiddle.net/zmqBg/6/

Извините за задержку; Я отвлекся. Это определенно работает, спасибо большое!
@CherylYaeger Хаха, все в порядке - рад помочь :)