javascript - 如何以美观的方式将 <select> 和 &lt;input&gt; 结合起来？

Question

我在处理用户脚本 (Greasemonkey/TamperMonkey)，我需要添加一个 <input>在我的下拉列表中，如果选择了一个元素。

这是一种让我的 <select>动态和交互，以便用户可以自己添加元素。

我希望在视觉上，用户有 <input> 的印象是一个 <option>在<select> .

我发现这样做的唯一方法是减少 <select> 的宽度并显示 <input> .

HTML:

<input style='display:none'></input>
<select id='my_select' style='width:150px'>
    <option>Test 1</option>
    <option>Test 2</option>
    <option>Test 3</option>
    <option>Make me feel input</option>
</select>

脚本:

$('#my_select').change(function() {
    var choosen = $("select option:selected").text();

    if (choosen == 'Make me feel input') {
        $('input').attr('style','width:125px;border-right:0px');
        $('select').attr('style','width:24px;margin-left:-4px;border-left:0px')
    }
    else {
        $('input').attr('style','display:none');
        $('select').attr('style','width:150px');
    }
});

结果还不错，you can try it on jsFiddle .

不幸的是，因为border-left:0px和 border-right:0px外观完全丢失，输入和选择的样式变得难看。

(火狐)

此外，最终的外观取决于所使用的浏览器。例如，对于 Chrome，会发生以下情况:

所以我希望我配置我的输入选择，以便无论浏览器如何，它看起来都不错。是否可以使用 CSS 和 JavaScript 模拟 Firefox 给出的外观？

当然，我考虑过使用像 Chosen、SelectBoxIt 或 Select2 这样的插件，但我不认为它们很容易与我的输入选择兼容(例如因为宽度调整大小)。

你能帮帮我吗？

Answer 1

有一种不使用包装器的更简单的方法。您可以将输入设置为 position:relative 和 display:inline-block，然后操作 margin 以定位到 select。 请注意，在 选择后添加输入要容易得多，这将不需要 z-index 黑客攻击。

请参阅此处示例:http://jsfiddle.net/AnbmU/6/我还冒昧地清理了您的代码中的常见错误。

编辑:实际上，您甚至不需要position:relative。不确定我为什么提出这个问题。