简单明了的选择标签样式化

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);
  });

- ThomasReggi

---

阅读此内容：https://dev59.com/jGw15IYBdhLWcg3wJ4ms - Martin Jespersen

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;
}

- user887675