Putting CSS to <datalist>

Question

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!

Dhyana

styling a datalist is up to the browser, there are very few styling options for the list. can you use jquery on your site ? I suspect the reason for the downvote is because styling a datalist has been asked on here a million times – Laevo

aw so i guess i cant just inline a datalist style? – Dhyana

you can only style the input box and a few options for the opt list, color etc. – Laevo

Possible duplicate of Is there a way to apply a CSS style on HTML5 datalist options? – Bufford

Answer 1

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.

Spinning

This is the most sad answer for designers. – Pinkiepinkish

This should be the proper answer to this question and all its duplicates – Defloration

Answer 2

I have given the name attribute to the list Input as shown below and also added the css Input with a name which works perfectly.

<input list="ServiceCity" name="service-city">
<datalist id="ServiceCity" name="ServiceCity"class = "atl_services">
            <option value "" disabled selected>Select City/County</option>
            .......other values
        </datalist>

CSS Code as follow:

input[name="service-city"] {
  border: 2px solid orange;
  border-radius: 10px 10px 10px 10px;
  font-size: 18px;
  padding: 5px;
  height: 35px;
  width: 350px;
}

Thank you,

Adduction

This is styling the input, though, not the datalist. – Chavers