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!

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.

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,