Question

使用select标签时，我遇到的问题是我的选项大于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/

当您选择多个a的那个时，它会越过箭头。当你选择短的时，它看起来很尴尬。选择时有没有办法缩短和延长宽度？

Answer 1

这对你有用吗？ 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>

更改选项上选择标记的大小

1 个答案: