Question

我是html元素样式的新手（例如输入＆amp;选择），我希望实现一个可视化组合的输入/选择元素。实质上，输入和选择仍将完全分离为表单元素，但基于class和css，我想将选择菜单的内容插入到输入字段的右侧。对不起，我不是照片，所以这里有一个代表它的样子：

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

正如您所看到的那样，输入的左侧部分是您为输入元素键入字符串的位置，而选择下拉列表插入到输入元素的边框中（[v]应该是一个向下箭头按钮放下列表）。任何有关如何盯着这样的风格或建议的链接都是受欢迎的。

Answer 1

所以，这个？

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

Answer 2

以下示例非常简单。它显示了你想要做的主要事情：因为表单元素能够像其他所有东西一样用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/

Answer 3

6年后：datalist元素可能有所帮助。

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

（Safari不支持此功能）

Answer 4

这样的事情应该能达到你想要的效果。

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

Answer 5

您可以尝试使用图书馆：https://github.com/eredacokmerke/dm-i

将输入和选择组合到一个可见输入字段中

5 个答案: