Question

I have been going crazy trying to get the selected option to align left like all the dropdown options.

I have inserted ‘text-align:left;’ in every css option but to no avail.

I have decided the javascript code must be doing something to the alignment of the selected option but am not proficient enough in javascript to locate what might be causing this.

Code is located at http://jsfiddle.net/X97cN/

CSS:

.ww-selectbox-div { margin-bottom:20px;margin-top:20px;}
.ww-selectbox a{ text-decoration:none;  font-family:Arial;  font-size:13px;  font-weight:bold;}
.ww-selectbox .ww-select-area a span.center{ background-color:#fff; padding:5px 40px 5px 30px;  border:1px solid #aaa;  border-radius:5px;  box-shadow:0 2px 3px #333;  color:#444}
.ww-selectbox .ww-select-area a:hover span.center, .ww-selectbox .ww-select-areaactive a span.center{background-color:#eee;  background-image:-moz-linear-gradient(center top,#FFF,#eee 5px,#eee 5px,#eee);  background-image:-webkit-gradient(linear,left top,left bottom,from(#FFF),color-stop(0.2,#eee),color-stop(0.5,#eee),to(#eee));  color:#777;  box-shadow:0 2px 3px #555}
.ww-selectbox .ww-select-areaactive a span.center{ border-radius:5px 5px 0 0}
.ww-selectbox .ww-select-area a span.arrow{ border-left:1px solid #AAA;  height:8px;  margin:5px 0 0 -23px;  padding:2px 0 2px 5px;  position:absolute;  width:8px;  background:url("../images/navigation/arrow_bottom.png") no-repeat scroll 5px 2px transparent;  z-index:99}
.ww-selectbox .ww-select-areaactive a span.arrow{background:url("../images/navigation/arrow_top.png") no-repeat scroll 5px 2px transparent}
.ww-selectbox .ww-select-options{ background-color:#FFFBD9;  position:absolute;   border:1px solid #aaa;  border-top:none;  margin-top:4px;  border-radius:0 0 5px 5px;  box-shadow:0 2px 3px #555;  z-index:100}
.ww-selectbox .ww-select-options ul{margin:0; padding:0}
.ww-selectbox .ww-select-options ul li { list-style:none; }
.ww-selectbox .ww-select-options ul li.option a{ color:#777;  text-align:left;  display:block;  padding:5px 15px;  border-bottom:dashed 1px #aaa}
.ww-selectbox .ww-select-options ul li.option a:hover{ background-color:#FFF8BA}
.ww-selectbox .ww-select-options ul li.option a.last{border:none; border-radius:0 0 5px 5px}

Javascript: (sorry for formatting better seen at http://jsfiddle.net/X97cN/)

(function(a){var m=function(b,h){var d=a(document.createElement("div")).addClass("ww-selectbox").insertBefore(b);d.append('<div class="ww-select-area"><a href="javascript:void(0);"><span class="center">'+b.find(":selected").text()+'</span><span class="arrow arrowdown"></span></a></div>');var f=a('<div class="ww-select-options" style="display:none;"></div>').appendTo(d),c=a("<ul />").appendTo(f),e="",i="",g=b.find("option");g.each(function(b,j){j=a(j);e=j.val()?j.val():j.text();i=b+1==g.length?'class="last"':
"";c.append('<li class="option"><a href="javascript:void(0);" value="'+e+'" '+i+">"+j.text()+"</a></li>")});h.height>0&&c.height(h.height).css({"overflow-x":"hidden","overflow-y":"auto"});b.hide();return d},n=function(b,h,d){var f=a(b).find(".ww-select-area"),c=f.find("a"),e=c.find(".center"),i=a(b).find(".ww-select-options"),g=i.find("a"),l=function(a){c.width("").width(c.width());if(a.width>0&&c.width()>a.width){c.width("");var b=e.html().split("");e.html("");for(var d=0;c.width()+8<a.width&&d<
b.length;)e.html(e.html()+b[d]),c.width("").width(c.width()),d++;e.html(e.html()+"...");c.width(a.width)}a=g.first().outerWidth()-g.first().width()+(i.outerWidth()-i.width());g.width(c.outerWidth()-a)};c.click(function(){f.hasClass("ww-select-areaactive")?k(f,i):i.slideDown("fast",function(){g.removeClass("last");g.filter(":visible").last().addClass("last");f.addClass("ww-select-areaactive")})});g.click(function(){e.html(a(this).html());g.show().removeClass("last");a(this).hide();k(f,i);h.find("option[value='"+
a(this).attr("value")+"']").attr("selected","selected");h.change();l(d)});a(b).mouseenter(function(){a(this).addClass("ww-select-active")}).mouseleave(function(){a(this).removeClass("ww-select-active")});g.filter(function(){return a(this).html()==h.find(":selected").text()}).hide();l(d)},k=function(a,h){h.slideUp("fast",function(){a.removeClass("ww-select-areaactive")})};a.fn.wwselect=function(b){a(this).each(function(h,d){var f={width:0,height:0},c=a(d);b&&a.extend(f,b);var e=m(c,f);n(e,c,f)});a("body").click(function(){a(".ww-selectbox").each(function(b,
d){a(d).hasClass("ww-select-active")||k(a(d).find(".ww-select-area"),a(d).find(".ww-select-options"))})})}})(jQuery);

Answer 1

What about this ?

.ww-selectbox .ww-select-area a span.center { 
 padding:5px 40px 5px 12px;
 /* ... */
}

Fiddle here: http://jsfiddle.net/X97cN/1/