CSS not supported in IE 9 for Dropdownlist - css

Question

I have a dropdownlist which is made in HTML5. But it is not taking the CSS in IE 9.
Please see the html for the same.
<div class="lbl-drop">
<label class="lbl">
<div class="dropdown dropdown-dark">
<select class="dropdown-select">
<option selected=""> Date Added: Latest Firt</option>
<option>Short Option</option>
<option>This Is A Longer Option</option>
</select>
</div>
</label>
</div>
The above was the html code,
Please see the CSS for your reference:-
<style type="text/css">
.dropdown:before {
border-bottom-style: solid;
border-top: none;
}
.dropdown:after {
margin-top: 7px;
border-top-style: solid;
border-bottom: none;
}
.dropdown:before, .dropdown:after {
content: '';
position: absolute;
z-index: 2;
top: 9px;
right: 10px;
width: 0;
height: 0;
border: 4px dashed;
border-color: #888 transparent;
pointer-events: none;
}
.dropdown:before {
border-bottom-style: solid;
border-top: none;
}
.dropdown:after {
margin-top: 7px;
border-top-style: solid;
border-bottom: none;
}
</style>
Also some more CSS related to it which I forgot, Sorry
<style type="text/css">
.dropdown-dark {
padding: 4px;
margin: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/* -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; */
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
/* box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; */
background: transparent;
font-family: "Lato-Italic";
font-size: 14px;
color: #a5a5a5;
border: 1px solid #a5a5a5;
outline: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}

Answer 1

Let's do it with jQuery as shown below
$(document ).ready(function() {
$("select").after().addClass("color-change-select");
$("select option").after().addClass("color-change");
});
.color-change-select { /* for the select */
color: white;
font-size: 24px;
display: blcok;
position: relative;
border: solid 1px red!important;
background-color: maroon;
}
.color-change { /* for the options */
color: white;
display: blcok;
position: absolute;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option> Date Added: Latest Firt</option>
<option>Short Option</option>
<option>This Is A Longer Option</option>
</select>
Follow this link to see how you can add your own link and get it to always stay at the top
Note: Using jQuery method will help combat browser issues