2

我需要一个下拉菜单以逆时针旋转 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 的东西。我已经提到过： 需要 Jquery 代码来旋转整个 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 解决方案。

谢谢

4

2 回答 2

1

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

于 2012-09-28T14:05:12.523 回答
0

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 引入的样式）

于 2012-09-28T14:05:07.710 回答