Question

我一直在寻找一种以疯狂式方式设计几个<select>标签的方法。

我希望选择框宽度基于所选内容而不显示额外的空格。
我正在寻找一种方法，使其尽可能与跨浏览器兼容，现在它在webkit中工作正常，但可怕的箭头在firefox中显示。
仅限渐进增强JS，回退到常规选择字段。

非常感谢任何有关实现这一目标的帮助。

  $('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;
}

简单的选择标签样式

1 个答案: