Editable 'Select' element
I would like to have a select element in the form but besides the options in the dropdown, it would be useful to be able to edit it and add new option but not with another i
-
Nothing is impossible. Here's a solution that simply sets the value of a text input whenever the value of the
changes (rendering has been tested on Firefox and Google Chrome):jsfiddle: https://jsfiddle.net/nwH8A/.select-editable {position:relative; background-color:white; border:solid grey 1px; width:120px; height:18px;} .select-editable select {position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0;} .select-editable input {position:absolute; top:0px; left:0px; width:100px; padding:1px; font-size:12px; border:none;} .select-editable select:focus, .select-editable input:focus {outline:none;}
The next example adds the user input to the empty option slot of the
(thanks to @TomerPeled). It also has a little bit more flexible/variable CSS:jsfiddle: https://jsfiddle.net/pu7cndLv/1/.select-editable {position:relative; width:120px;} .select-editable > * {position:absolute; top:0; left:0; box-sizing:border-box; outline:none;} .select-editable select {width:100%;} .select-editable input {width:calc(100% - 20px); margin:1px; border:none; text-overflow:ellipsis;}
DataList
In HTML5 you can also do this with the list attribute and
jsfiddle: https://jsfiddle.net/hrkxebtw/(click once to focus and edit, click again to see option dropdown)But this acts more like an auto-complete list; once you start typing, only the options that contain the typed string are left as suggestions. Depending on what you want to use it for, this may or may not be practical.
加载中...
- 热议问题