减少select元素中的下拉宽度

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. 将固定width设置为select
2. 在title
中使用option
3. 使用第3个应用

将固定width设置为select

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

中使用option

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>

使用第3个应用

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

• Select2
• jQtransform

更新

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

Answer 2

很晚才回答，可能不是100％你在寻找什么： 我的选择元素的下拉宽度几乎覆盖了屏幕宽度的一半。

看起来下拉列表的宽度由

之间的字符数控制

<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元素的宽度。