Html 更改“选择上的标记”选项的大小

使用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:

例子
aa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

以下是一个例子：

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

这对您有用吗

新增功能：

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

• 从

  div

• 添加了假的

---

您可能必须使用JavaScript，我不确定是否可以使用纯CSS解决方案JavaScript。您知道使用该方法的方法吗？这可能会帮助您：

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