0

スタイルを変更するにはどうすればよいですか (例: オプションに :text-alginまたはdirsingle を追加) または のselect1optionつ。

andのalign rightシングルをやってみましたが、前の場合はremain(手段: )。しかし、働かないでください。私は何をしますか？selectoptionalign left

デモ

select {
    direction: rtl;
    text-align: right;
    width: 300px;
}​

<select>
    <option disabled="disabled" selected="" value="" style="display: none;">Select</option>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>​
4

2 に答える 2

0

単一のオプションの整列は、すべてのブラウザーでサポートされているわけではありません。驚くべきことに、Firefoxはそれを許可しますが、IE、Chrome、Operaは許可しません。optionでシングルのスタイルを設定しようとするコードは次のとおりselectです。

<select>
    <option disabled="disabled" selected="" value="" style="display: none;">Select</option>
    <option class="lefty">option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>

そしてcss

select {
    width: 300px;
}
.lefty {
    direction: rtl;
    text-align: right;
}

ただし、オプションに余分なスペースを埋めて、正しいインデントの印象を与えることはできますが、これはあまり良い解決策ではありません。

もう1つのオプションは、 jQuery SelectBoxやSelectBoxItプラグインなど、組み込みのブラウザーコントロールに依存しないものを使用することです。これらのプラグインは、ブラウザーの動作に組み込まれておらず、動的に作成されたDOM要素であるため、レンダリングされたコンテンツのスタイルを設定できます。 CSSでスタイルを設定できます。

SelectBoxItの場合、次のようなものを使用できます。

$(document).ready(function() {
  $('.myselect .selectboxit-option-anchor').first().css("text-align", right");
});
于 2012-11-20T13:53:33.607 に答える
0

残念ながら、現在クロス ブラウザの選択ボックスのスタイル設定はできません。これが、ユーザーがカスタム スタイルを作成できるように、選択ボックスを模倣する DOM 要素を作成する非常に多くの選択ボックス プラグインが存在する理由です。

SelectBoxItを使用することになり、これを CSS で行いたい場合は、次のようにすることができます。

.selectboxit-option:nth-child(1) {
    text-align: right;
}

注： SelectBoxItを書きました

于 2012-11-20T15:15:55.333 に答える