web-dev-qa-db-ja.com

入力と選択を1つの表示可能な入力フィールドに結合します

私はhtml要素（この場合はinput＆selectなど）のスタイル設定に不慣れであり、視覚的に組み合わされたinput/select要素を実装しようとしています。本質的に、入力と選択はフォーム要素として完全に分離されますが、クラスとcssに基づいて、選択メニューの内容を入力フィールドの右側に挿入したいと思います。申し訳ありませんが、私はフォトショッパーではないので、次のように表示されます。

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

ご覧のとおり、入力の左側の部分は入力要素の文字列を入力する場所であり、選択ドロップダウンは入力要素の境界線に挿入されています（[v]は下矢印ボタンであると想定されています）リストを削除します）。このようなスタイリングを凝視する方法へのリンクや提案は大歓迎です。

javascriptjqueryhtmlcssinput
7
somecallmemike

したがって、この？

http://jqueryui.com/demos/autocomplete/#combobox

9
mccow002

次の例は非常に単純です。それはあなたがしたい主なことを示しています：フォーム要素は他のすべてと同じように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/

6
Qqwy

6年後：datalist要素が役立つ可能性があります。

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

（Safariはまだこれをサポートしていません）

3
Ideogram

このような何かがあなたが望むことを達成するはずです。

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

1
Robert

試すことができるライブラリがあります： https://github.com/eredacokmerke/dm-i

0
user4757345