Объединение ввода и выбор в одно видимое поле ввода - PullRequest
Новая
       1

Объединение ввода и выбор в одно видимое поле ввода

7 голосов
/ 29 ноября 2011

Я новичок в стилизации html-элементов (например, input & select в этом случае) и ищу реализацию визуально комбинированного элемента input / select. По сути, вход и выбор по-прежнему будут полностью разделены как элементы формы, но в зависимости от класса и CSS я бы хотел вставить содержимое меню выбора в правую часть поля ввода. Извините, я не фотошопер, так что вот как это может выглядеть: 

 ------------------------------------------------
 |                              Select text [v] |
 ------------------------------------------------

Как вы видите, в левой части ввода вы вводите строку для элемента ввода, а выпадающий список выбора вставляется в границу элемента ввода ([v] должен быть кнопка со стрелкой вниз, чтобы выпустить список). Любые ссылки на то, как получить стилизацию чего-то подобного или предложения, приветствуются.

Ответы [ 5 ]

9 голосов
/ 29 ноября 2011
6 голосов
/ 29 ноября 2011

Следующий пример очень прост.Он показывает главное, что вы хотели бы сделать: поскольку элементы формы можно стилизовать с помощью CSS, как и все остальное, это довольно просто.В этом примере все еще есть проблемы со стилем браузеров, отличных от Firefox, я его немного исправлю. 

<html>
<head>
    <style>
        select#selectoption {
            border-left:none;
            padding:none;
        }

        input#datahere {
            position:relative;
            border-right:none;
            padding:none;
        }
        </style>
    </head>
<body>
    The form below is a simple example.
<form name ="explanation"action="test" method="post">
<input type="text" id="datahere" />
<select id="selectoption" /><option>test</option><option>test2</option></select>

</form>


</body>
</html>

РЕДАКТИРОВАТЬ: онлайн-пример того, что вы хотите, можно увидеть здесь: http://jsfiddle.net/xFQMf/3/

3 голосов
/ 02 февраля 2017

6 лет спустя: элемент списка данных может помочь.

https://developer.mozilla.org/nl/docs/Web/HTML/Element/datalist

(Safari пока не поддерживает это)

1 голос
/ 29 ноября 2011

Что-то вроде этого должно выполнить то, что вы хотите.

http://jsfiddle.net/rhoenig/xFQMf/

0 голосов
/ 11 декабря 2014

Есть библиотека, которую вы можете попробовать: https://github.com/eredacokmerke/dm-i

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...