How can I create an editable dropdownlist in HTML?

Question

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 predefin

Answer 1

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 {
  position: absolute;
  width: calc(100% - 20px);
}

  
  
    This is option 1
    Option 2
  

Please note: it uses previousElementSibling() which is not supported in older browsers (below IE9)