如何将固定宽度选择框的下拉菜单向左展开而不是向右？

Question

我有这段代码：http://jsfiddle.net/9pyh2/

<style type="text/css">
   select {width:200px;}
</style>

<form>
   <select><option value="">Choose one</option>
      <option>First choice</option>
      <option>Second choice</option>
      <option>Really long third choice that makes the dropdown expand etc etc etc etc etc</option>
   </select>
</form>

当有一个很长的选项时，是否可以将下拉菜单展开到左侧而不是右侧？

Answer 1

可能的解决方案

如果您愿意绝对定位选择菜单，可以使用以下技巧。

这是 working example 。

代码

将您的元素包裹在相对定位的父级中：

<form class="relative">
  <select class="ddm">
    <option value="1">Fly</option>
    <option value="2">Lizard</option>
    <option value="3">Snake</option>
  </select>
</form>

并应用以下样式：

.relative { position: relative; }

.ddm {
  position: absolute;
  top: 0;
  right: 0;
}

这将允许选择菜单仅扩展到左侧。