How can I create an editable dropdownlist in HTML?
I’d like to create a text field with a dropdown list that lets the user choose some predefined values. The user should also be able to type a new value or select a predefined one from a dropdown list. I know that I can use two widgets for that but in my app it would be more ergonomnic if it was unified in a one widget. Is there a standard widget or do I have to use a third party javascript? How about browser portability?
12 Answers 12
You can accomplish this by using the tag in HTML5.
If you double click on the input text in the browser a list with the defined option will appear.
@JamesNewton But that still the right way for doing that IMO. You can use some plugin so your implementation will be cross-browser and future proof 🙂
@AaronHudon No it is not. The datalist is a suggestion list, not a select replacement. To better understand what I mean, you should try to create a datalist with options 0 — 9. These will not show up because of my first statement.
One potential downside is that if the input has a value, displaying the datalist only shows the options that match the input’s current text. So the user does not see the available options.
Will it ever be supported? This answer is from 2013; 5 years later in 2018 only two browsers (Chrome for Android and Samsung Internet) fully support it (source).
This can be achieved with the help of plain HTML, CSS and JQuery. I have created a sample page:
Note that for anyone scanning this, jQuery is just being used to copy the dropdown selection into the textbox; the «secret sauce» (as implemented elsewhere on this page) is just the 20px gap to let you see/click the dropdown arrow.
Very simple implementation (only basic functionality) based on CSS and one line of JavaScript code.
.dropdown < position: relative; width: 200px; >.dropdown select < width: 100%; >.dropdown > * < box-sizing: border-box; height: 1.5em; >.dropdown input
Please note: it uses previousElementSibling() which is not supported in older browsers (below IE9)
You should include the code within your answer as well so we don’t have to go to another site that might go away.
Why use this.previousElementSibling and not document.getElementById() ?? This would make it being supported by some more old browsers
Thank you, this is an elegant solution compared to everything else I’ve found—and it readily works within my page!
The best way to do this is probably to use a third party library.
There’s an implementation of what you’re looking for in jQuery UI jQuery UI and in dojo dojo. jQuery is more popular, but dojo allows you to declaratively define widgets in HTML, which sounds more like what you’re looking for.
Which one you use will depend on your style, but both are developed for cross browser work, and both will be updated more often than copy and paste code.
The tag only allows the use of predefined entries. The typical solution to your problem is to have one entry labeled ‘Other’ and a disabled edit field (
It may be possible to somehow create a dropdown that allows direct editing, but IMO that is not worth the effort. If it was, Amazon, Google or Microsoft would be doing it 😉 Just get the job done with the least complicated solution. It as faster (your boss may like that) and usually easier to maintain (you may like that).
ComboBox with TextBox (For Pre-defined Values as well as User-defined Values.)
HTML doesn’t have a built-in editable dropdown list or combobox, but I implemented a mostly-CSS solution in an article.
You can see a full demo here but in summary, write HTML like this:
And use CSS like this to style it (this is designed for both comboboxes, which have a down-arrow ▾ button, and dropdown menus which open when clicked and may be styled differently):
/* ------------------------------------------ */ /* ----- combobox / dropdown list styling */ /* ------------------------------------------ */ .combobox < /* Border slightly darker than Chrome's , slightly lighter than FireFox's */ border: 1px solid #999; padding-right: 1.25em; /* leave room for ▾ */ > .dropdown, .combobox < /* "relative" and "inline-block" (or just "block") are needed here so that "absolute" works correctly in children */ position: relative; display: inline-block; >.combobox > .downarrow, .dropdown > .downarrow < /* ▾ Outside normal flow, relative to container */ display: inline-block; position: absolute; top: 0; bottom: 0; right: 0; width: 1.25em; cursor: default; nav-index: -1; /* nonfunctional in most browsers */ border-width: 0px; /* disable by default */ border-style: inherit; /* copy parent border */ border-color: inherit; /* copy parent border */ >/* Add a divider before the ▾ down arrow in non-dropdown comboboxes */ .combobox:not(.dropdown) > .downarrow < border-left-width: 1px; >/* Auto-down-arrow if one is not provided */ .downarrow:empty::before < content: '▾'; >.downarrow::before, .downarrow > *:only-child < text-align: center; /* vertical centering trick */ position: relative; top: 50%; display: block; /* transform requires block/inline-block */ transform: translateY(-50%); >.combobox > input < border: 0 >.dropdown > *:last-child, .combobox > *:last-child < /* Using `display:block` here has two desirable effects: (1) Accessibility: it lets input widgets in the dropdown to be selected with the tab key when the dropdown is closed. (2) It lets the opacity transition work. But it also makes the contents visible, which is undesirable before the list drops down. To compensate, use `opacity: 0` and disable mouse pointer events. Another side effect is that the user can select and copy the contents of the hidden list, but don't worry, the selected content is invisible. */ display: block; opacity: 0; pointer-events: none; transition: 0.4s; /* fade out */ position: absolute; left: 0; top: 100%; border: 1px solid #888; background-color: #fff; box-shadow: 1px 2px 4px 1px #666; box-shadow: 1px 2px 4px 1px #4448; z-index: 9999; min-width: 100%; box-sizing: border-box; >/* List of situations in which to show the dropdown list. - Focus dropdown or non-last child of it => show last-child - Focus .downarrow of combobox => show last-child - Stay open for focus in last child, unless .less-sticky - .sticky last child stays open on hover - .less-sticky stays open on hover, ignores focus in last-child */ .dropdown:focus > *:last-child, .dropdown > *:focus ~ *:last-child, .combobox > .downarrow:focus ~ *:last-child, .combobox > .sticky:last-child:hover, .dropdown > .sticky:last-child:hover, .combobox > .less-sticky:last-child:hover, .dropdown > .less-sticky:last-child:hover, .combobox > *:last-child:focus:not(.less-sticky), .dropdown > *:last-child:focus:not(.less-sticky) < display: block; opacity: 1; transition: 0.15s; pointer-events: auto; >/* focus-within not supported by Edge/IE. Unsupported selectors cause the entire block to be ignored, so we must repeat all styles for focus-within separately. */ .combobox > *:last-child:focus-within:not(.less-sticky), .dropdown > *:last-child:focus-within:not(.less-sticky) < display: block; opacity: 1; transition: 0.15s; pointer-events: auto; >/* detect Edge/IE and behave if though less-sticky is on for all dropdowns (otherwise links won't be clickable) */ @supports (-ms-ime-align:auto) < .dropdown >*:last-child:hover < display: block; opacity: 1; pointer-events: auto; >> /* detect IE and do the same thing. */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) < .dropdown >*:last-child:hover < display: block; opacity: 1; pointer-events: auto; >> .dropdown:not(.sticky) > *:not(:last-child):focus, .downarrow:focus, .dropdown:focus < pointer-events: none; /* Causes second click to close */ >.downarrow:focus < outline: 2px solid #8BF; /* Edge/IE can't do outline transparency */ outline: 2px solid #48F8; >/* ---------------------------------------------- */ /* Optional extra styling for combobox / dropdown */ /* ---------------------------------------------- */ *, *:before, *:after < /* See https://css-tricks.com/international-box-sizing-awareness-day/ */ box-sizing: border-box; >.combobox > *:first-child < display: inline-block; width: 100%; box-sizing: border-box; /* so 100% includes border & padding */ >/* `.combobox:focus-within < outline. >` doesn't work properly in Firefox because the focus box is expanded to include the (possibly hidden) drop list. As a workaround, put focus box on the focused child. It is barely-visible so that it doesn't look TOO ugly if the child isn't the same size as the parent. It may be uglier if the first child is not styled as width:100% */ .combobox > *:not(:last-child):focus < outline: 2px solid #48F8; >.combobox
You also need some JavaScript to synchronize the list with the textbox:
function parentComboBox(el) < for (el = el.parentNode; el != null && Array.prototype.indexOf.call(el.classList, "combobox") // Uses jQuery $(".combobox.withtextlist > select").change(function() < var textbox = parentComboBox(this).firstElementChild; textbox.value = this[this.selectedIndex].text; >); $(".combobox.withtextlist > select").keypress(function(e) < if (e.keyCode == 13) // Enter pressed parentComboBox(this).firstElementChild.focus(); // Closes the popup >); HTML Drop-down Menu – How to Add a Drop-Down List with the Select Element
Joel Olawanle
Many websites, applications, and web pages use drop-down menus to help display a list of information. You can use them to create navigation menus, options for forms, and more.
If you’re looking at some of these menus or lists, you might imagine how complex creating them could be. And yes – in some cases, it gets a little bit complex.
A drop-down menu is a list of options that gets revealed vertically when a user interacts with the menu by either clicking on it or hovering over it with their cursor.
This menu also disappears when the user stops interacting with the menu by clicking again or taking the cursor away from the menu.
In this article, you will learn how to add a drop-down list to the select element on your webpage. You’ll also learn the various options available, and how to create a hoverable drop-down list/menu.
How to Create an HTML Dropdown List
In HTML, by default, you can always create a drop-down list with the select tag alongside the option tag. This is mainly used within forms to select a value from a list of many options.
The select tag has two primary attributes: the name and id attributes.
You use the name attribute to identify the drop-down when a selection is submitted in a form. You can connect the id attribute to a label that has similar values to its for attribute.
The select tag also has some optional boolean attributes like disabled (which disables the select fields), required (which makes the field required in a form), and lots more.
Within the select tag, you can add many options in the individual option tag. The option tag has an attribute of value that specifies a value that is submitted from the form when an option gets selected.
There are other boolean attributes like disabled (which disables the option in the menu), and selected (which you use to set a particular option as the default selected option when the page loads rather than the first option).
In the above code, the first option has an attribute of disabled , meaning you will not be able to select the option. The fourth option has an attribute of selected , meaning that instead of having JavaScript as the selected value by default, Java will be selected.
How to Create a Hover-able Drop-down Menu
When you scroll through or visit many advanced and modern webpages, you will notice that they have drop-down menus.
These menus are used for navigation to help hold similar links together. Most times, when you hover on the parent menu, then the drop-down list appears.
You can create these types of menues in various ways, as there is no direct syntax to build one.
You can create this using CSS styling to show and hide the drop-down list when the user hovers over the menu. A very good approach is to create a div that holds the menu and the drop-down.
This div serves as a container and you can style it to a position of relative and display of inline-block , so the drop-down options appear below the menu.
You can style your button and the dropdown-options however you wish. But the major style that controls the hover effect, by default, sets the dropdown-options not to display. Then when a mouse hovers over the menu, the display is not set to block , so the options are visible. You also set the position to absolute , so the options appear below the menu, and overflow to auto to enable scroll on small screens.
.dropdown-options < display: none; position: absolute; overflow: auto; >.dropdown:hover .dropdown-options
In the demo below, we add more styling to make the drop-down menu more attractive and nice:
Wrapping Up
In this article, you have learned how to create a drop-down list with the select tag. You’ve also learned how to create the hoverable drop-down menu with CSS to handle the hover effect.