Kako spremeniti izgled select elementa

CSS3 nam je prinesel 116 novih lastnosti, pa vendar so pozabili na eno izmed glavnih lastnosti. Urejanje izgleda select elementa s pomočo CSS-ja. Ker si včasih zaželimo, da bi bil izgled popoln si spodaj poglejmo primer kako zamaskirati select list element.

CSS3 nam je prinesel 116 novih lastnosti, pa vendar so pozabili na eno izmed glavnih. Urejanje izgleda select elementa s pomočo CSS-ja. Ker si včasih zaželimo, da bi bil izgled popoln si spodaj poglejmo primer kako zamaskirati select list element.

S pomočjo javascript (v spodnjem primeru uporabljamo knjižnico jqurey), skrijemo obstoječi select element. Pod njega pa vrinemo span element, ki bo dobil želene lastnosti preko css-ja.

(function($){
 $.fn.extend({
 	customSelect : function(options) {
	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
	  return this.each(function() {

			var currentSelected = $(this).find(':selected');
			var html = currentSelected.html();
			if(!html){ html=' '; }
			$(this).after(''+html+'').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
			var selectBoxSpan = $(this).next();
			var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));			
			var selectBoxSpanInner = selectBoxSpan.find(':first-child');
			selectBoxSpan.css({display:'inline-block'});
			selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
			var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
			$(this).height(selectBoxHeight).change(function(){
			selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');
			});
	  });
	  }
	}
 });
})(jQuery);

jQuery(document).ready(function($) {
	$('select').customSelect();
});

Ko smo skrili select element lahko sedaj s pomočjo css-ja uredimo izgled elementa.

Izgled zunanjosti elementa:

.customStyleSelectBox { 
     border:1px solid #b6bbc0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background:#fcfcfc;
    padding:3px 3px 2px 5px;
    display:inline-block;
}

Izgled notranjosti elementa:

.customStyleSelectBoxInner { 
     background:url(../images/dropdown_arrow.png) no-repeat 100% 50%;
    text-align:left;
    color:#000;
}
Končni rezultat: