Member Avatar for lps

Good day, I have a problem here: is it possible to put an input field into option such as this?

<select>
	<option><input type="text" value="aa"></option>
</select>

(This is not working, any suggestiuon on how to refine it for it to work?)
Any help will be appriciated.

  • 2 Contributors
  • 1 Reply
  • 334 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Agarsia

Dani AI

Generated

Short answer: you cannot put an interactive input inside a native <option>. The option element is intended for plain text only, so browsers either ignore nested controls or behave unpredictably. , that is why your snippet fails. is on the right track — to mix free text and selectable choices you must either augment the select (reveal an input when a special option is chosen), use an <input> with a suggestion list, or build a fully custom dropdown component.

A simple, robust pattern is the "Other" option that reveals an adjacent text field:

<select id="mySelect">
  <option value="">Choose...</option>
  <option value="a">A</option>
  <option value="other">Other</option>
</select>
<input id="otherText" type="text" placeholder="Please specify" style="display:none">

<script>
document.getElementById('mySelect').addEventListener('change', function() {
  var other = this.value === 'other';
  var i = document.getElementById('otherText');
  i.style.display = other ? 'inline-block' : 'none';
  if (other) i.focus();
});
</script>

If you want typing with suggestions, <input> + <datalist> is simpler and closer to native behavior:

<input list="choices" id="choice">
<datalist id="choices">
  <option value="aa">
  <option value="bb">
</datalist>

Notes and cautions:

  • If you implement a completely custom dropdown (the div-based approach mentioned by ), add keyboard support, focus management, and ARIA (combobox/listbox/option roles) so it is accessible.
  • Test on mobile and older browsers; datalist support varies and native selects often give the best UX on touch devices.
  • Keep form semantics clear for server-side processing: send either the select value or the custom input value, not both.
Member Avatar for Agarsia

nope, this will not work.
you can create a "select" element with javascript or css3 using div elements and in these you could have input-elements like: for example:

<div id="select">
 <div id="active"><!--active option--></div>
 <div id="dropdown">
  <div class="option"><input type="text" value="aa" /></div>
 </div>
</div>

this has to be designed with css. you could use the :hover effect

-Agarsia

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.