[RESOLVED] Problem with dropdown manu (arrow) design.

**ehsan85** · May 17th, 2011, 04:47 AM

hello,
i'm munna from Bangladesh, I'm a graphic designer and beginner of HTML/CSS. I have create a form design and convert it to html. But i want to see my html form, same as my psd form. Please see this attachment, you can clear about my problem.

Please help me specially for dropdown arrows.

regards
ehsan.

**SambaNeko** · May 17th, 2011, 11:57 AM

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...

**ehsan85** · Aug 16th, 2011, 11:06 AM

Thank you very much for your help.

Thread: [RESOLVED] Problem with dropdown manu (arrow) design.

Thread Tools

Display

[RESOLVED] Problem with dropdown manu (arrow) design.

Re: Problem with dropdown manu (arrow) design.

Re: Problem with dropdown manu (arrow) design.

Posting Permissions