[RESOLVED] Problem with dropdown manu (arrow) design.-VBForums
Results 1 to 3 of 3

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

  1. #1

    Thread Starter
    Junior Member ehsan85's Avatar
    Join Date
    Nov 2010
    Location
    Faridpur, Bangladesh
    Posts
    29

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

    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.

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,500

    Re: Problem with dropdown manu (arrow) design.

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

  3. #3

    Thread Starter
    Junior Member ehsan85's Avatar
    Join Date
    Nov 2010
    Location
    Faridpur, Bangladesh
    Posts
    29

    Re: Problem with dropdown manu (arrow) design.

    Thank you very much for your help.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.