用于旋转下拉菜单的Jquery/Javascript

我需要一个下拉菜单，以显示旋转90度逆时针-以便下拉选择“按钮”文本垂直显示，然后选项滑出同样的旋转，横向，垂直文本。（上下文：用户需要从图形Y轴的多个选项中选择一个标题，并且下拉列表需要存在于标题最终出现的位置，同样旋转。）

html目前仅如下所示：

<select id="title"  >
<option value="title-0">Choose a chart title</option>
<option value="title-1">title 1</option>
<option value="title-2">title 2</option>
<option value="title-3">title 3</option>
</select>

发生的事情是——至少在Firefox15中——选择“按钮”会旋转，但是当菜单被激活时，下拉选项会保持在原来的水平位置—（并且下拉链接不起作用）

我已经尝试将rotate类分别应用于option标记、select标记或全封闭div。所有这些似乎都无法解决问题

显然，有很多插件可以为jQuery添加旋转支持。我所看到的一个似乎只适用于图像或简单的div元素——实际上，对于整个下拉菜单没有任何效果

有什么想法吗。。最好使用Javascript/jquery解决方案

---

感谢

当旋转效果应用于

optgroup

元素时，它似乎在FX15上起作用

选择图表标题
标题1
标题2
标题3

---

但是您可能还需要指定一个高度（并重置optgroup引入的样式）

这是一个浏览器错误：

附加注释：我正在为图形本身使用JS框架-Highcharts JS。因此，如果你想告诉我去拖网海图API-足够公平-我无论如何都会这样做，但是，你知道，欢迎任何帮助。塔汉克斯·法布里齐奥，我来试试。（我现在需要上床睡觉，但我会在早上看的）非常感谢。。但不太管用。正如您的jsbin链接所示，optgroup不位于select按钮下。。不太清楚重置optgroup的样式是什么意思。我可以向optgroup添加填充或边距，但这只会影响optgroup框中的选项文本，而不会影响optgroup框本身的定位。此外，单击选项似乎并不完全可靠：有时有效，有时无效。这很可能是一个特定于浏览器的问题（尽管它似乎也出现在Safari中）-但是，Firefox是我的主要目标受众浏览器，所以这对我没有帮助。还有其他JS选项/框架吗？也许是拉斐尔。。我会到处找人…如下所示-这可能是一个特定于浏览器的问题（虽然它似乎也发生在Safari中）-但是，Firefox是我的主要目标受众浏览器，所以这对我没有帮助。如果它是一个bug，除了从div和无序列表中创建自己的select-like元素之外，您实在无能为力。

.box_rotate {
-webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
-moz-transform: rotate(90deg);  /* FF3.5+ */
-ms-transform: rotate(90deg);  /* IE9 */
-o-transform: rotate(90deg);  /* Opera 10.5 */
transform: rotate(90deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand');
zoom: 1;
}

<select>
    <optgroup>
       <option value="title-0">Choose a chart title</option>
       <option value="title-1">title 1</option>
       <option value="title-2">title 2</option>
       <option value="title-3">title 3</option>
    </optgroup>
</select>