减少 select 元素中的下拉宽度

Question

下拉列表采用最长值的宽度，在我的例子中这已经很长了。我想将下拉列表的宽度减小到 select 框本身的宽度（在我的例子中是 70%）。试过没有。各种其他 Whosebug 问题中的选项，但我无法解决这个问题。

Select箱码：

<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. 为您的 select
设置一个固定的 width
2. 在 option
中使用 title
3. 使用第三个应用程序

为您的 select

设置一个固定的 width

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>

在您的 option

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

更新：

注意：无法设置下拉宽度。它的宽度取决于 options 值

Answer 2

迟到的答案，可能不是 100% 的您要找的东西： 我的 select 元素的下拉宽度几乎占了屏幕宽度的一半。

看起来下拉列表的宽度是由

之间的字符数控制的

<option><?php SOME PHP-CODE  ?></option>

我替换后：

    <div class='nobord' style='position: absolute; left: 60.2%; width: 15%; height: 11%; top:25%; background-color: transparent;'>
<?php $maxi=$results['numcountries']+1; 
      <select class='likeinput'  style='width: 100%' name='country' id='CountrySelector' >
<?php   for ($i = 0; $i<= $maxi; $i++) {
          if($results['Country'][$i]->countryname===$results['contact']->country){ ?>
            <option value='<?php echo $results['Country'][$i]->countryname ?>' selected='selected' ><?php echo $results['Country'][$i]->countryname; ?></option>
<?php     } else { ?>
            <option value='<?php echo $results['Country'][$i]->countryname ?>' ><?php echo $results['Country'][$i]->countryname ?></option>
<?php     } 
        } ?>       
      </select>

与：

      <div class='nobord' style='position: absolute; left: 60.2%; width: 15%; height: 11%; top:25%; background-color: transparent;'>
<?php   $maxi=$results['numcountries']+1; ?>
        <select class='likeinput'  style='width: 100%' name='country' id='CountrySelector' >
<?php     for ($i = 0; $i<= $maxi; $i++) {
            $val= $results['Country'][$i]->countryname;
            if($results['Country'][$i]->countryname===$results['contact']->country){ 
?>
              <option value='<?php echo $val?>' selected='selected' ><?php echo $val ?></option>
<?php       } else { ?>
              <option value='<?php echo $val?>' ><?php echo $val ?></option>
<?php       } 
          } ?>       
        </select>

下拉宽度对应于 select-元素的宽度。