Autor Zpráva
Ota
Profil *
Zdravím,

pokoušel jsem se nastylovat <select> a hledání mě navedlo až na jquery... našel jsem docela jednoduchý návod js + css.

Funguje mi bez problémů ve Firefoxu, Internet Exploreru, Opere, Chromu, ale problém nastává při testování v Safari:(

select se neroztáhne přesně tak jak bych měl > na délku textu. Chtěl jsem to tedy obejít, tak že to nastyluju na pevno (podle mě je tam ta funkce zbytečná a radši to stylovat na pevno). Zadal jsem tedy přes css width:60px. Jak jsem psal v těch nejznámějších prohlížečích to funguje.. kromě Safari. Nemohl by mi někdo prosím poradit jakým způsobem to udělat tak aby se to roztáhlo, tak jak to má být? popřípadě nejradši tu funkci úplně oddělat(nejlepší řešení)?

Tady je JS script...

(function($){
 $.fn.extend({
 
 	customStyle : function(options) {
	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
	  return this.each(function() {
	  
			var currentSelected = $(this).find(':selected');
			$(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').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($('option:selected',this).text()).parent().addClass('changed');
			});
			
	  });
	  }
	}
 });
})(jQuery);


$(function(){

$('select.styled').customStyle();

});



CSS
span.customStyleSelectBox {height:15px; color: #464646; font:bold 12px arial, sans-serif; background-color: #fafafa; padding:2px 10px 2px 5px; border:1px solid #CFCDCD; -moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px 5px; }
.customStyleSelectBoxInner { background:url(image/select_sipka.gif) no-repeat center right; z-index:10}


Díky za každou radu...
Ota
Profil *
Nebo nezná někdo jiný návod na styl selectu? Co nejjednoduší? díky
Plaváček
Profil
Ota:

Třeba tenhle? http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
Ota
Profil *
No ten jsem taky zkousel, ale bohuzel je tam nastavenej pevnej rozmer. Takze v pripade ze mam dve ruzny velikosti selectu(width:100px a width:50px) tak bych musel udelat dalsi script + stylovani

Nebo to jde i jinak?

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: