如何通过审美方式将<select>和<input>结合起来？

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');
    }
});

结果非常好,你可以在jsFiddle上试试.

不幸的是,因为border-left:0px和border-right:0px外观完全丢失了,输入和选择的风格变得难看.

(火狐)

而且,最终的外观取决于所使用的浏览器.以Chrome为例,这是发生的事情:

所以我希望我配置我的输入选择,以使其看起来不管浏览器.是否可以使用CSS和JavaScript模拟Firefox提供的外观？

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

请问你能帮帮我吗？

Answer 1

没有包装器有一种更简单的方法.您可以将输入设置为position:relative和display:inline-block然后操纵margin以定位select.请注意,在 select 之后添加输入要容易得多,这将使z-index hackery变得不必要.

请参见此处的示例:http://jsfiddle.net/AnbmU/6/我也可以自由地清除代码中的常见错误.

编辑:实际上,你甚至不需要position:relative.不知道为什么我提起这件事.