Putting CSS to <datalist>
css, html, html-datalist
Solution
Per MDN:
Some elements simply can't be styled using CSS. These include all advanced user interface widgets such as range, color, or date controls as well as all the dropdown widgets, including `<select>`, `<option>`, `<optgroup>` and `<datalist>` elements. The file picker widget is also known not to be stylable at all. The new `<progress>` and `<meter>` elements also fall in this category.
Problem
so right now i have a simple datalist drop down menu and i want to change the CSS of it so that the style matches with the rest of the fields on the website. However i am a web design noob and i am kind of confused as to get this process done. refer to: http://jsfiddle.net/ryax5L29/20/ ``` <input list="ServiceCity"> <datalist id="ServiceCity" name="ServiceCity"class = "atl_services"> <option value "" disabled selected>Select City/County</option> .......other values </datalist> ``` This is the CSS i want to use ``` input{ padding: 7px; outline: none; max-width: 100%; margin-bottom: 5px; border-width: 1px; border-style: solid; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px width: 88.5%; border: 1px solid GREY; box-shadow: 0px 0px 3px GREY; } ``` I have the CSS in there as well, imo it will be easiest to inline the CSS but if someone can guide me through that it would be great thanks!