Menu
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:
<input list="browsers" name="browser">
<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">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
976
The only cross-browser solution is to: a) make input wider to make sure whole value is readable: JSFiddle b) use (or write) some JavaScript to emulate datalist so you can have full control over it's appearance.
HTML5 <datalist> elements cannot be styled.
Definition and Usage The <datalist> tag specifies a list of pre-defined options for an <input> element. The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
<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">If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
