Recently, I encountered an issue with customizing a select menu using CSS and jQuery. After some work, I was able to achieve a result that I am quite pleased with:
So far, the styling works perfectly in Mozilla, Opera, Chrome, and IE7+.
Below is the current source code I have:
HTML:
<select class="styled" name="">
<option>Select title</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Miss.</option>
</select>
CSS:
select {
border: 1px solid #d6d8db;
background-color: #ecedee;
text-transform: uppercase;
color: #47515c;
padding: 12px 10px 12px 10px;
width: auto;
cursor: pointer;
margin-bottom: 10px;
}
select > option {
text-transform: uppercase;
padding: 5px 0px;
}
.customSelect {
border: 1px solid #d6d8db;
background-color: #ecedee;
text-transform: uppercase;
color: #47515c;
padding: 12px 10px 12px 10px;
margin-bottom: 10px;
}
.customSelect.changed {
background-color: #f0dea4;
}
.customSelectInner {
background:url(../images/select_arrows.png) no-repeat center right;
}
The jQuery consists of two parts: - the plugin - and the control code
You can view this in the FIDDLE link I created: http://jsfiddle.net/s6jGW/1/
Please note there are "External Resources" on the left.
My Objectives
I aim to style the dropdown to closely resemble the image provided (adjusting height, padding, hover effects).
I do not want the "SELECT TITLE" to be included as a selection option, it should only serve as the title of the select box, unlike the current setup in the fiddle: http://jsfiddle.net/s6jGW/1/
Most importantly, I am seeking a cross-browser solution for this task.
Thank you in advance