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?
Share Improve this question asked Jul 13, 2013 at 11:52 DelganDelgan 19.7k11 gold badges98 silver badges155 bronze badges 1- 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
Reset to default 5There 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>