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のものがあることを知っています。私はすでに言及しました: div全体を回転させるためのJqueryコードが必要 なので、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 に答える