我正在创建一个能够像在文本字段中一样输入内容的 ComboBox。
为此,我使用了 <input type="text">
和 <select>
与 <option>
元素。
在这里找到了这个解决方案:Link
问题是当我没有为 select
设置宽度时它呈现尽可能宽的选项。这正是我所需要的。
但我还必须为文本字段设置一些宽度以适应。
如何正确执行?
这是我的代码:
HTML:
<div class="outer">
<input type="text" class="text-input"/>
<div class="inner">
<select class="editable-select">
<option>One option</option>
<option>Another</option>
</select>
</div>
</div>
CSS:
.outer, .inner {
position: absolute;
}
.text-input {
width: 50px;
height: 17px;
padding: 0 4px;
position: absolute;
top: 1px;
left: 1px;
z-index: 2;
border: none;
}
.editable-select {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
附言当从组合框中选择时,请不要介意该值未在文本字段中设置。这不是这个问题的目标。
最佳答案
这对我来说效果很好,请试试这个代码。 希望它能解决您的问题。
<div class="outer">
<input type="text" class="text-input"/>
<div class="inner">
<select class="editable-select">
<option>One option</option>
<option>Another</option>
</select>
</div>
</div>
.outer {
display:table;
}
.inner {
display:table-cell;
}
.text-input {
width: 50px;
height: 17px;
padding: 2 4px;
display:table-cell;
top: 1px;
left: 1px;
z-index: 2;
border: 1px solid #e7e7e7;
}
.editable-select {
top: 0px;
left: 0px;
z-index: 1;
}
关于html - 可编辑的 html 组合框。如何为输入设置适当的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31751409/