更改選項標籤的大小選項

使用選擇標籤時，我遇到了一個問題，其中我的選項大於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

更改選項標籤的大小選項

回答

相關問題