Autor | Zpráva | ||
---|---|---|---|
Ota Profil * |
#1 · Zasláno: 13. 3. 2011, 18:10:02
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 * |
#2 · Zasláno: 14. 3. 2011, 14:58:51
Nebo nezná někdo jiný návod na styl selectu? Co nejjednoduší? díky
|
||
Plaváček Profil |
#3 · Zasláno: 14. 3. 2011, 15:12:43
|
||
Ota Profil * |
#4 · Zasláno: 15. 3. 2011, 09:11:20
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? |
||
Časová prodleva: 14 let
|
0