I work on a userscript (Greasemonkey/TamperMonkey), and I need to add a <input> in my drop-down list if ever an element is selected.

It is a way to make my <select> dynamic and interactive so that the user can add items by itself.

I would like visually, the user has the impresion that the <input> is an <option> in the <select>.

The only way I've found to do this is to reduce the width of <select> and display an <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>

Script:

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

The result is pretty nice, you can try it on jsFiddle.

Unfortunately, because of border-left:0px and border-right:0px appearance is pletely lost, and the style of the input and select bee ugly.

(Firefox)

Moreover, the final appearance depends on the browser used. With Chrome, for example, here's what happens:

So I wish I configure my input-select in order to make it look good regardless of the browser. Is it possible to simulate the appearance given by Firefox using CSS and JavaScript?

Of course, I thought about using a plugin like Chosen, SelectBoxIt ou Select2, but I do not think they are easily patible with my input-select (because of the width resize for example).

Could you help me please?

I work on a userscript (Greasemonkey/TamperMonkey), and I need to add a <input> in my drop-down list if ever an element is selected.

It is a way to make my <select> dynamic and interactive so that the user can add items by itself.

I would like visually, the user has the impresion that the <input> is an <option> in the <select>.

The only way I've found to do this is to reduce the width of <select> and display an <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>

Script:

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

The result is pretty nice, you can try it on jsFiddle.

Unfortunately, because of border-left:0px and border-right:0px appearance is pletely lost, and the style of the input and select bee ugly.

(Firefox)

Moreover, the final appearance depends on the browser used. With Chrome, for example, here's what happens:

So I wish I configure my input-select in order to make it look good regardless of the browser. Is it possible to simulate the appearance given by Firefox using CSS and JavaScript?

Of course, I thought about using a plugin like Chosen, SelectBoxIt ou Select2, but I do not think they are easily patible with my input-select (because of the width resize for example).

Could you help me please?

• javascript
• jquery
• css
• select
• input

• 3 If you are open to ideas, it's better if you use a fully custom select element. Otherwise, I see a maintenance nightmare ing up for you. Now, Seeing if any of those plugins is patible with what you want to do is a task that you can easily undergo – Alexander Commented Jul 13, 2013 at 11:57

4 Answers 4

There is an easier way without wrappers. You can set your input to position:relative and display:inline-block and then manipulate margin to position over the select. Note that it is much easier to add input after select, which will make z-index hackery unnecessary.

See example here: http://jsfiddle/AnbmU/6/ I also took liberty to clean up your code from mon mistakes.

EDIT: Actually, you don't even need position:relative. Not sure why I brought this up.

i visied the fiddle yuo provide in some browsers.
there is some problems and paradoxes:

1- when you click on select box, it opens (naturally) and when you click on an input it activates and is ready to type in. question is how you want to handle this?

2- in your code when you reduce the select width it will open in a shifted place wich is equall to your input width;

finally answer
you sholud put your input and select in a container(wrapper), and make it position: relative;
then es yuor input with: border: 0; position: absolute; top: 0; left: 0; z-index: 2; and display: none, when you want to activate it simply make it: display: block; and it handles both above problems nicely

A ui ponent that's frequently called a "bo box" has functionality similar to what you describe.

examples:

jquery
http://simpletutorials./?path=tutorials/javascript/jquery/ddbobox
http://fairwaytech./flexbox/flexbox-demos/#demo1

dojo
https://dojotoolkit/reference-guide/1.9/dijit/form/ComboBox.html#dijit-form-bobox

cross-browser form element styling has always been a challenge. generally, ui toolkits just avoid the issue and totally recreate the ui ponents using lots of divs and explicit styles for reliability.

you should try this : https://github./eredacokmerke/metal

also there is an example : codepen.io/eredacokmerke/pen/LEpNLg

from metal readme:

Metal is a pure javascript library that provides bination of select and input tag.

Usage

add css :
<link rel="stylesheet" href="https://raw.githack./eredacokmerke/metal/master/metal.css">

add js :
<script src="https://raw.githack./eredacokmerke/metal/master/metal.js"></script>

add html for list with input:
<div class="metal-div">
    <div class="metal-input-div" metal-text="Choose..."></div>
    <div class="metal-items-div">
        <ul class="metal-items">
            <li>first_item</li>
            <li>second_item</li>
            ....
        </ul>
    </div>
</div>

add html for list without input:
<div class="metal-div">
    <div class="metal-output-div" metal-text="Choose..."></div>
    <div class="metal-items-div">
        <ul class="metal-items">
            <li>first_item</li>
            <li>second_item</li>
            ....
        </ul>
    </div>
</div>