Menu
I am trying to have datalist list element always visible. As standard after focused lost, the arrow disappears.
I would like to have it always like this: Here is the plunker: https://plnkr.co/edit/?p=preview
<input list="browsers" name="myBrowser" /> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> </datalist>
ENVIRONMENT: Angular directive
Any ideas how to achieve it?
Best,
867
HTML5 <datalist> elements cannot be styled.
Generally, both the tags are used for choosing an option from the given list. But the main difference between both is that in the <datalist> tag the user can enter its own input and add that as an option with the help of the <input> element whereas the <select> tag doesn't provide this feature.
Unfortunately, Internet Explorer and Chrome are the only browsers to support datalists on range inputs at this time.
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.
I have got the arrow always visible using css:
input::-webkit-calendar-picker-indicator { opacity: 100; } <input list="browsers" name="myBrowser" /> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> </datalist>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