更改选项标签的大小选项

使用选择标签时，我遇到了一个问题，其中我的选项大于select的大小。我也遇到了一个问题，其中选项很短，它使标签看起来很尴尬。以下是我有：更改选项标签的大小选项

.styled-select-sort { 
    overflow: hidden; 
    background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF; 
    font-size: 16px; 
    font-family: "Open Sans", sans-serif; 
    display: inline-block; 
    padding: 3px 15px; 
    font: normal 16px/normal "Open Sans", sans-serif; 
    width: 100%; 
} 

.styled-select-sort select { 
    background: transparent; 
    font-size: 15px; 
    font-family: "Open Sans", sans-serif; 
    line-height: 20px; 
    border: 0; 
    height: 20px; 
    -webkit-appearance: none; 
    outline:none; 
    width: auto; 
}

HTML：

<div class="styled-select-sort" id="sort" style="width: 85px;"> 
    <select> 
    <option>Example</option> 
    <option>aa</option> 
    <option>aaaaaaaaaaaaaaaaa</option> 
    </select> 
</div>

下面是一个例子：https://jsfiddle.net/L4erw151/

当您选择了一个有许多是不言而喻过去的箭头。当你选择短的时候看起来很尴尬。选择时是否有缩短和延长宽度的方法？

来源

2016-01-24 user081608

你可能会使用JavaScript，我不知道有关，只有CSS解决方案 –

Javascript很好。你知道使用它的方法吗？ – user081608

这可能会帮助你：http://stackoverflow.com/questions/20091481/auto-resizing-the-select-element-according-to-selected-options-width –

这会帮你吗？ https://jsfiddle.net/L4erw151/4/

新增功能：

$(document).ready(function() { 
$('#sel').change(function(){ 
    $("#tmp-option").html($('#sel option:selected').text()); 
    $(this).width($("#tmp").width() + 25); 
}); 
});

删除style="width: 85px"从div
添加假<select>

来源

2016-01-24 01:35:32 k97513

更改选项标签的大小选项

回答

相关问题