javascript - 减少选择元素中的下拉宽度

Question

下拉列表采用最长值的宽度，在我的例子中是相当长的。我想将下拉列表的宽度减小到选择框本身的宽度(在我的例子中是 70%)。试过没有。各种其他 StackOverflow 问题中的选项，但我无法解决这个问题。

选择框码:

<select id="college" name="college" placeholder="College Name">
          <option name="">{{ user.college.name }}</option>

          {% for college in colleges %}
          <option class="colleges" value="{{ college.url }}" name="college">{{ college.name }}</option>
          {% endfor %}
</select>

Answer 1

你可以尝试一些事情:

1. 为您的选择设置一个固定的宽度
2. 在您的选项中使用title
3. 使用第三个应用

为你的选择设置一个固定的宽度

select {
    width:75px; /*whatever you want*/
}

<select name="college" id="college">
    <option value="small">small</option>
    <option value="normal text">normal text</option>
    <option value="long text option">long text option</option>
    <option value="very long text option">very long text option</option>
</select>

在您的选项中使用title

select {
    width:75px; /*whatever you want*/
}

<select name="college" id="college">
    <option value="1" title="small">1</option>
    <option value="2" title="normal text">2</option>
    <option value="3" title="long text option">3</option>
    <option value="4" title="very long text option">4</option>
</select>

使用第三个应用

您可以选择一些可用的..只是举几个例子:

• > Select2
• > jQtransform

更新:

注意:无法设置下拉宽度。它的宽度取决于选项的值