Question

我需要一个下拉菜单，以逆时针方向旋转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>

我知道有CSS3的东西。我已经提到过： Need Jquery code for rotate a whole div 所以我试过像这样或类似的CSS：

.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;
}

会发生什么 - 至少在Firefox 15中 - 选择“按钮”被旋转，但是当菜单被激活时，下拉选项保持在原来的水平位置 - （并且下拉链接不会工作）。

我尝试将旋转类分别应用于选项标签，选择标签或全封闭div。这似乎都无法解决问题。

显然，“很多插件都能够为jQuery添加旋转支持。” （根据前面提到的SO问题）。我所看到的那个似乎只适用于图像或简单的div元素 - 实际上并不适用于整个下拉菜单。

有什么想法吗？ ..首选Javascript / jquery解决方案。

由于

Answer 1

这是一个浏览器错误：https://bugzilla.mozilla.org/show_bug.cgi?id=455164

Answer 2

当旋转效果应用于optgroup元素时，它似乎适用于FX15，

http://jsbin.com/ifatiy/1/edit

<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>

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

Jquery / Javascript用于旋转下拉菜单

2 个答案: