Adding custom styles for select box - html

Question

I need to add some custom styles to HTML select box completely changing its default style.
This is how my select box should be after adding custom styles.
I could have to get these styles to certain level. But still not 100%.
This is my HTML and CSS.
<span class="custom-dropdown large">
<select class="select select_large">
<option>Select an Option</option>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
<option>Option Four</option>
<option>Option Five</option>
</select>
</span>
.large {
font-size: 15px;
}
.select{
font-size: inherit;
padding: 10px;
margin: 0;
}
.select_large {
background-color: #001848;
color: #fff;
}
.select_large option{
background-color: #dadada;
color: #000;
border: none;
padding: 2px 5px;
}
.select_large option::hover {
background-color: #20b390;
}
#supports (pointer-events: none) and
((-webkit-appearance: none) or
(-moz-appearance: none) or
(appearance: none)) {
.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
}
.select {
padding-right: 40px;
border: 0;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-dropdown::before,
.custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}
.custom-dropdown::after { /* Custom dropdown arrow */
content: "\25BC";
font-size: 20px;
line-height: 15px;
right: 10px;
top: 50%;
margin-top: -5px;
}
.custom-dropdown::before { /* Custom dropdown arrow cover */
width: 40px;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}
.large::before {
background-color: #001848;
//background-color: #dadada;
}
.large::after {
color: #dadada;
//color: #434343;
}
#-moz-document url-prefix() {
.select { padding-right: .9em }
.large .select { padding-right: 40px }
.small .select { padding-right: .5em }
}
}
This is a FIDDLE
Hope somebody will help me out.
Thank you.

Answer 1

Selects are really annoying to style. This is because they depend on the browser and operating system and therefore parts of them are not style-able. For example, you can change the background color of the options, but if an option is selected, the styling gets messed up (you can't change the color of the selected option).
Try looking into some jQuery plugins like ms-Dropdown: http://www.marghoobsuleman.com/jquery-image-dropdown

Answer 2

Your safest bet is to find a js plugin that will render a dynamic with custom styling while maintaining the functionality of your .
The problem with customizing with custom CSS is that its usually the OS who styles them and its looks change from OS to OS considerably, making it nearly impossible to style in an uniform matter with pure CSS.
simply do a search for 'jquery selectbox' or 'jquery custom select'