Обычный простой стиль тегов стиль

Question

Я искал способ подстроить пару тегов <select> в стиле madlib-esque.

• Я хочу, чтобы ширина окна выбора основывалась на том, что выбрано и не отображает лишние пробелы.
• Я ищу способ сделать это максимально совместимым с кросс-браузером прямо сейчас, он отлично работает в webkit, но страшные стрелки отображаются в firefox.
• Прогрессивное улучшение JS only, возврат к регулярному полю выбора.

Вот моя скрипка: 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; 
}