Input type="text" with select functionality after clicking on Input type="text"

This can’t be done with the standard form controls alone, but you can make your own. See the comments below for explanation.

// Get references to elements used
var input = document.getElementById("selectedBrowser");
var list = document.getElementById("list");

// Get all the list items into an array
var listItems ="#list > div"));

// Make the "drop down" list the same width as the input = getComputedStyle(input).width;

// Set up click handler on the input
input.addEventListener("click", function(){ 
 list.classList.remove("hidden");  // Show the list

// Set up input event handler on input
input.addEventListener("input", function(){ 
 list.classList.add("hidden");  // Hide the list

// Loop over the list items
  // Set up a click event handler
  item.addEventListener("click", function(){
    input.value = item.textContent;    // Copy the value into the input
   list.classList.add("hidden");       // Hide the list

  // Set up a mouseover event handler
  item.addEventListener("mouseover", function(){
    item.classList.add("highlight");       // Hide the list
  // Set up a mouseout event handler  
  item.addEventListener("mouseout", function(){
    item.classList.remove("highlight");       // Hide the list
/* Applied to the drop down list by default to hide it and
   removed when the list needs to be shown. */
.hidden {

#container {

/* Ensures that the input will be positioned at the top-left of its parent */
#selectedBrowser {

#list {
  position:absolute; /* Position at top-left of parent */
  top:1.85em;  /* But, then move down to be below the input */
  border:1px solid #e0e0e0; 
  height:5em;  /* Limit height of list */
  overflow-y:scroll; /* Add vertical scroll bar when list won't fit in height */

#list > div {
  margin:2px 0;

.highlight {
  background-color:rgba(255, 255, 0, .5);
<label for="selectedBrowser">Choose a browser from this list:</label>
<div id="container">
  <input id="selectedBrowser" name="browser">
  <div id="list" class="hidden">
    <div>Internet Explorer</div>
    <div>Microsoft Edge</div>

Browse More Popular Posts

Leave a Comment