The short answer is that you cannot achieve that appearance. HTML form elements are unique in that they use default styling determined by the user's OS. Some aspects of the default styling are impossible to remove, and your life as a web designer will be easier if you accept and design mindfully of this fact.
But, there are gimmicky ways to achieve many things. Here's a quick n' sloppy example:
Code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<style>
body{background:#fba525;}
.selectWrapOuter{background:url('select-bg.png') no-repeat;height:38px;}
.selectWrapInner{overflow:hidden;width:285px;}
select{background:transparent;border:none;height:38px;padding:11px;width:330px;}
</style>
<div class="selectWrapOuter">
<div class="selectWrapInner">
<select>
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</body>
</html>
You can see it in action here. I've only looked at it in Firefox and IE, and it doesn't work quite right in IE7 and below, though it could probably be tweaked to perfection. Explanation: you can't use your nicely-styled image as a background on the <select> element, because the drop-down button will still appear over it. The button needs to be hidden, so we put the <select> inside of a <div> with overflow:hidden, and then make the width of the <select> longer than the width of the <div>. You still can't put your background image on this <div> because it's not big enough to show the whole image - so you have to wrap it in another div.
There are also solutions that could be made with Javascript, which would probably be my preferred route, but that's beyond the scope of this post...
[RESOLVED] Problem with dropdown manu (arrow) design.
Reply With Quote
