Bootstrap: Add CSS styling for datalist elements appearing with .custom-range

Created on 25 Feb 2018  路  2Comments  路  Source: twbs/bootstrap

custom-range looks great! How about adding styling for datalist elements linked to <input type=range > ? For example, the following HTML code should display range with tick marks:

<label for="datalistRange">Marks</label>
<input type="range" class="custom-range" min="0" max="5" id="datalistRange" list="marks">
<datalist id="marks">
<option value="0">
<option value="40">
<option value="60">
voption value="80">
<option value="100">
</datalist>

Thanks,
Nitin

css feature

Most helpful comment

Any chance of re-opening now supported by Safari (as of 12.1)? Already supported by Chrome and Firefox https://caniuse.com/#feat=datalist

All 2 comments

Apparently support is real bad for this, so punting as a won't fix. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

Any chance of re-opening now supported by Safari (as of 12.1)? Already supported by Chrome and Firefox https://caniuse.com/#feat=datalist

Was this page helpful?
0 / 5 - 0 ratings

Related issues

knownasilya picture knownasilya  路  3Comments

kamov picture kamov  路  3Comments

iklementiev picture iklementiev  路  3Comments

fohlsom picture fohlsom  路  3Comments

devfrey picture devfrey  路  3Comments