Cross-browser Styled Dropbox

[KennyP]

Hi guys,

I managed to style a dropbox that works cross-browser. However, I can't solve the following issue:
When the name of a selection is short, it displays fine when it's selected. When the name of a
selection is long, it superimposes itself over the dropdown arrow image. See attached images.

Can you suggest a way to alter the css so that the width of long selected names are prevented from
reaching the dropdown arrow, say by maybe 3 or four pixels?

Thanks,

Kenny

The website

    #mySelect {	
    position: relative;
    top: 0px;
    left: 0px;
}

.styled {
	color:#E3B172;
    width: 185px;
    height: 26px;
    overflow: hidden;    
	background: url(/images/dropdown-arrow.png) no-repeat 100% #37271A;
    border: 1px solid #4C3726; 
	-webkit-border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	border-radius: 6px 6px 6px 6px;
    -webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    -pie-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
	cursor:hand;
} 
.styled:hover {
    border: 1px solid #4C3726; 
	
}

.styled select {
	color:#E3B172;
    position: relative;
    background: transparent;
    top: 01px;
    left: 0px;
    width: 214px;
    height: 24px;    
    padding: 2px 0px 3px 3px;
    font-size: 16px;
    -webkit-appearance: none; 
}

            
<form action="<? bloginfo('url'); ?>" method="get">
 <div id="mySelect" class="styled">           
 <select name="page_id" id="page_id">
 <?php
 global $post;
 $args = array( 'numberposts' => -1);
 $posts = get_posts($args);
 foreach( $posts as $post ) : setup_postdata($post); ?>
                <option style="border:1px solid #3d2a1b;color:#E3B172;background:#37271A;z-index:-2;" value="<? echo $post->ID; ?>"><?php the_title(); ?></option>
 <?php endforeach; ?>
 </select></div>

[Deadweight]

Are you wanting the dropbox to change size per selection?

[KennyP]

Thanks for your reply Deadweight. No I do not want the dropbox to change size per selection. I would like each title itself to be prevented from fully displaying beyond several pixels before they reach the dropdown arrow. That would limit each title to display no more than a width of 168px in order that it no longer superimpose itself over the arrow as it does now (showing in the second image attachment); the remainder of each title should be hidden once it is selected.

[Deadweight]

Currently the only thing that i can think of is actually making the dropdown arrow have a background color.
Meaning go into photoshop and give it a certain color. I do have a custom drop down object like what you have above.
If you would like to see it please let me know.

[KennyP]

Thank you. Yes I'd love to see the dropdown you have, and possibly replace the one I have with it.
Ideally, I wanted the dropdown to also have a styled vertical scrollbar and still maintain the width
of the options list as wide as the longest title, but I haven't been able to get it to work.

Regarding the background color, I already put a background color on the arrow, same color as the
rest of the background. Unfortunately, even with a high z-index setting I couldn't get it to display
over the selected title. The selected title always displays over the arrow instead, and looks very
sloppy.

[Deadweight]

Sorry Kenny it took me so long to reply.
Besides missing the colors and everything you wanted something like this:
http://thebcelements.com/dhtml/dropdown/

(Works on mobile also)

[KennyP]

Wow! Thanks for sharing that Deadweight! That's almost what I've been trying to do,
except for a customized scrollbar. Also, I would need to add the classes and IDs
within the <select> and <option> tags, or into a div wrapper as you see in the code
of my first post.

Thanks again,

Kenny

[Deadweight]

Yes I know. I'll update it with all the style once I get back home and show you it again. I'll be home around 1pm EST (4am EST). I'll let you know when I update the link with your titles. FYI this isn't your regular option/select menu :3 if you look at the source it may surprise you!

[KennyP]

Thanks Deadweight - looking forward to seeing it.

[Deadweight]

Umm not entirely sure what you mean by
"Also, I would need to add the classes and IDs
within the <select> and <option> tags, or into a div wrapper as you see in the code
of my first post. "
however i updated this:
http://thebcelements.com/dhtml/dropdown/

Another note. Change the dropdown and click view.