how to change display width of datalist

html css html-datalist
user3861163 picture user3861163 · Aug 14, 2014 · Viewed 18.8k times · Source

i have a simple issue with HTML datalist but somehow cant solve this problem. i've tried to change the displayed width for the following datalist:

but no matter what i try, it still cuts down the "long" option values. how can i change that, so that the datalist shows all the option values, no matter how long they are?

best regards

Answer

Diego Rodriguez picture Diego Rodriguez · Nov 13, 2015 

<input list="browsers" name="browser" style="width: 100px;">

  <datalist id="browsers">
   <option value="this is a really long name for a browser">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Internet Explorer">
  </datalist>

<input type="submit">

Related questions

Is there a way to apply a CSS style on HTML5 datalist options?

I would like to modify the way that the list of the different options of my datalist are displayed. Is it possible to apply on it some CSS properties ? <input list="languages" id="language_id"> <datalist id="…

Read More
Is it possible to style the drop-down suggestions when using HTML5 <datalist>?

See here: http://jsfiddle.net/zemar (Must use Firefox or Opera to see) When you click on the select, the drop-down is styled to match, but if you start typing a term from the data-list in the text box the …

Read More
Limit total entries displayed by datalist

When there is a long set of elements in a datalist, they will all get displayed with a scroll bar next to them. Is there an easy way to only display the top 5, and just cut the others off? For …

Read More