簡單的簡單選擇標籤樣式

Question

我一直在尋找一種方式，以madlib風格的時尚風格幾個<select>標籤。

• 我希望選擇框的寬度基於所選內容並且不顯示額外的空格。
• 我正在尋找一種方法，使其儘可能跨瀏覽器兼容，現在它在webkit中工作正常，但可怕的箭頭顯示在Firefox中。
• 只有漸進式增強JS，回退到常規選擇字段。

這裏是我的小提琴：http://jsfiddle.net/bXJrk/

上實現這一目標的任何幫助，將不勝感激。

$('select').each(function(){ 
    var width = $('option[value='+$(this).val()+']').html(); 
    $('body').append('<span id="'+$(this).val()+'" style="display:none">'+width+'</span>'); 
    var two = $('#'+$(this).val()).width(); 
    $(this).width(two+4).addClass('jsselect'); 
    }); 

    $('select').change(function(){ 
    var width = $('option[value='+$(this).val()+']').html(); 
    $('body').append('<span id="'+$(this).val()+'" style="display:none">'+width+'</span>'); 
    var two = $('#'+$(this).val()).width(); 
    $(this).width(two+4); 
    }); 

Answer 1

這就是我弄出來的。

小提琴：http://jsfiddle.net/wAs7M/4/

的Javascript：

$('.replacementcontainer select').each(function(){ 

var apply = function(el){ 

    var text = $('option[value='+el.val()+']').html(); 

    var span; 
    if (el.data('initialized')) 
    { 
     span = el.parent().next().html(text); 
    } 
    else 
    { 

     el.data('initialized', true); 

     el.after('<span id="'+el.val()+'" class="jsselect hiddenspan">'+text+'</span>'); 
     el.wrap($('<span class="selwrapper"></span>')); 

     span = el.parent().next(); 
     span.addClass('jsselect'); 
     el.addClass('jsselect'); 

    } 
    el.parent().width(span.width() + 5); 

    var two = span.width(); 

}; 

apply($(this)); 
$(this).change(function(){ apply($(this)); }); 

}); 

CSS：

*{font-family:sans-serif;font-size:15px} 

    .replacementcontainer { 
    margin: 10px; 
} 
.replacementcontainer span { 
    display: inline-block; 
    margin-bottom: -4px; 
} 

.jsselect { 
    color: #3084CA; 
    text-decoration: underline; 
    border: none; 
    background: none; 
    padding: 0; 
    margin: 0; 
    cursor: pointer; 
    outline: none; 
} 
.selwrapper { 
    display: inline-block; 
    overflow: hidden; 
} 
.hiddenspan { 
    visibility:hidden; 
    position:absolute; 
}