3

私の人生では、サイズ属性を使用する選択ボックスのスタイルを設定する方法がわかりません。そこにあるほとんどすべてのチュートリアルは、単一項目の選択ボックス用です。size 属性を使用する選択ボックスの経験はありますか?

参考までに、これは私が話していることです：

<select class="awesome_select" size="5">
<option>1</option>
<option>2</option>
</select>

Mac 用の Chrome/Safari/Firefox で開発しています。-moz-appearance: none; を試しました。-webkit-appearance: none; 選択ボックスと個々のオプションの両方のプロパティ。また、選択とオプションに境界線を設定しようとしました。

サイズを変更したり、移動したり、フォント サイズを変更したりできるという意味で、選択ボックスのスタイルを設定することはできますが、個々のオプションのスタイルを完全に設定することはできません。

edit 1これが私がやりたいことの例です:

select.awesome_select {
border: 1px solid #ACADAC;
padding: 0;
outline: none;
-webkit-appeareance: none;
}
select.awesome_select option {
padding: 5px;
background-color: #FF0000;
-webkit-appearance: none;
}

通常の選択 (size 属性を使用しない) がある場合は、好きなようにスタイルを設定できます。サイズ属性を使用すると、オプションを突然変更できなくなります。

4

2 に答える 2

1

select要素にクラスを与え、そこでcssを実行します。

<select class="classname" size="5">
<option>1</option>
<option>2</option>
</select>

//css

.classname {width:0;
height:0;
background:# ;//etc }
于 2013-08-20T19:11:51.843 に答える
1

あなたは jQuery を自由に使用でき、元の SELECT はニーズに合わないため、jQueryUI から Selectableを使用することをお勧めします。

これがあなたに合わない場合は、Google で他の人を探しますが、「リストボックス」(例:「jQuery リストボックス」) を検索すると、http://kalnitsky.org/projects/listbox.js/en/のような代替案が見つかります。

それらのほとんどは、既存の SELECT 要素を新しいものに変換しませんが、変換するものもあります。

于 2013-08-20T19:46:18.080 に答える