Javascript 将输入和选择组合到一个可见的输入字段中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8302684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Combining input and select into one visible input field
提问by somecallmemike
I am new to styling html elements (e.g. input & select in this case), and I am looking to implement a visually combined input / select element. In essence the input and select would still be completely separate as form elements, but based on class and css I would like to inset the contents of the select menu into the right hand side of the input field. Sorry I am no photoshoper, so here is a representation of what it might look like:
我是 html 元素样式的新手（例如在这种情况下输入和选择），我希望实现一个视觉上组合的输入/选择元素。本质上，输入和选择仍然作为表单元素完全分开，但基于类和 css，我想将选择菜单的内容插入到输入字段的右侧。对不起，我不是photoshoper，所以这里是它可能的样子：
------------------------------------------------
| Select text [v] |
------------------------------------------------
As you can see the left hand portion of the input is where you would type the string for the input element, and the select drop down is inset into the border of the input element (the [v] is supposed to be a down arrow button to drop the list). Any links to how to get stared styling something like this or suggestions are welcome.
如您所见，输入的左侧部分是您为输入元素键入字符串的位置，选择下拉列表插入输入元素的边框（[v] 应该是向下箭头按钮删除列表）。欢迎任何有关如何开始样式的链接或建议。
回答by mccow002
回答by Qqwy
The following example is very simple. It shows the main thing you would want to do: Since form elements are able to be styled with CSS just as everything else, it is pretty straightforward. This example still has some styling issues with non-firefox browsers, I will improve it a little.
下面的例子非常简单。它显示了您想要做的主要事情：由于表单元素可以像其他所有内容一样使用 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>
EDIT: An online example of what you want can be seen here: http://jsfiddle.net/xFQMf/3/
编辑：可以在此处看到您想要的在线示例：http: //jsfiddle.net/xFQMf/3/
回答by Ideogram
6 years later: the datalist element might help.
6 年后：datalist 元素可能会有所帮助。
https://developer.mozilla.org/nl/docs/Web/HTML/Element/datalist
https://developer.mozilla.org/nl/docs/Web/HTML/Element/datalist
(Safari doesn't support this, yet)
（Safari 尚不支持此功能）
回答by Robert
Something like this should accomplish what you want.
这样的事情应该完成你想要的。
回答by user4757345
There is a library you can try : https://github.com/eredacokmerke/dm-i
您可以尝试一个库：https: //github.com/eredacokmerke/dm-i
