web-dev-qa-db-ja.com

選択ボックスをスタイルすることは可能ですか？

スタイルを設定する必要があるHTML選択ボックスがあります。 CSSだけを使用したいのですが、必要な場合はjQueryを使用してギャップを埋めます。

誰でも良いチュートリアルやプラグインをお勧めできますか？

Googleを知っていますが、私は過去2時間検索しており、自分のニーズを満たすものを見つけていません。

次のことが必要です。

  • JQuery 1.3.2との互換性
  • アクセシブル
  • 控えめな
  • 選択ボックスのあらゆる側面をスタイリングするという点で完全にカスタマイズ可能

誰かが私のニーズを満たすものを知っていますか？

jquerycsshtml-select
143
dougoftheabaci

<select>を<ol>に、<option>を<li>に変換して、CSSでスタイル設定できるjQueryプラグインを見てきました。あなた自身を転がすのは難しいことではありません。

https://Gist.github.com/1139558 （彼に使用 here ですが、サイトはダウンしているようです）

次のように使用します。

$('#myselectbox').selectbox();

このようにスタイルします：

div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current { 
  background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}
45
Mark A. Nicolosi

更新：2013年現在、確認する価値のある2つは次のとおりです。

  • Chosen -たくさんのクールなもの、githubの7k +ウォッチャー。 （コメントの「有料オタク」で言及）
  • Select2 -Chosenに触発されました。Angular-UIの一部で、Chosenにいくつかの便利な調整があります。

うん！

2012年現在、私が見つけた最も軽量で柔軟なソリューションの1つは、 ddSlick です。サイトからの関連する（編集された）情報：

  • 画像とテキストをselect optionsに追加します
  • JSONを使用してオプションを設定できます
  • 選択時にコールバック関数をサポート

そして、さまざまなモードのプレビューがあります：

enter image description here

17
papercowboy

CSSに関しては、Mozillaは特にFF 3.5+から最も友好的であるようです。 Webkitブラウザーはほとんどの場合、独自の処理を行い、スタイルを無視します。 IEは非常に制限されていますが、IE8では少なくとも境界線の色/幅をスタイルできます。

以下は、FF 3.5+で実際にかなり素敵に見えます（もちろん、好みの色を選んでいます）：

select {
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cfcfcf inset;
    border: 1px solid #cfcfcf;
    vertical-align: middle;
    background-color: transparent;
}
option {
    background-color: #fef5e6;
    border-bottom: 1px solid #ebdac0;
    border-right: 1px solid #d6bb86;
    border-left: 1px solid #d6bb86;
}
option:hover {
    cursor: pointer;
}

しかし、IEに関しては、オプションメニューがプルダウンされていないときに表示したくない場合は、オプションの背景色を無効にする必要があります。そして、私が言ったように、webkitは独自のことをします。

14
arxpoetica

これを行うための簡単で適切な方法を見つけました。クロスブラウザであり、分解可能であり、フォームポストを壊しません。最初に、選択ボックスの不透明度を0に設定します。

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

これはあなたがまだクリックできるようにするためです

次に、選択ボックスと同じサイズのdivを作成します。 divは、選択ボックスの下に背景として配置する必要があります。これを実現するには、{position：absolute}とz-indexを使用します。

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

JavascriptでdivのinnerHTMLを更新します。 jQueryで簡単に：

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

それでおしまい！選択ボックスの代わりにdivをスタイルするだけです。上記のコードはテストしていないので、おそらく微調整する必要があります。しかし、うまくいけばあなたは要点を取得します。

このソリューションは{-webkit-appearance：none;}に勝ると思います。ブラウザーで最もすべきことは、フォーム要素との対話を指示することですが、それがサイトデザインを壊すために最初にページに表示される方法ではありません。

11
Shaun

あなたがほとんどしたい場合、ここに小さなプラグがあります

  • select要素のclosed状態のカスタマイズに夢中になります
  • ただし、open stateでは、選択オプション（スクロールホイール、矢印キー、タブフォーカス、optionsへのAjaxの変更）のネイティブエクスペリエンスを優先します。 、適切なzindexなど）
  • 乱雑なul、li生成されたマークアップを嫌う

次に、 jquery.yaselect.jsの方が適している可能性があります 。単に：

$('select').yaselect();

最後のマークアップは次のとおりです。

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

github.com で確認してください

10
choonkeat

CSSを使用してある程度スタイルを設定できます

select {
    background: red;
    border: 2px solid pink;
}

しかし、これはブラウザ次第です。一部のブラウザは頑固です。

しかし、これはこれまでのところあなたを得るだけであり、それは常に非常によく見えるとは限りません。完全に制御するには、jQueryを介した選択を、選択ボックスの機能をエミュレートする独自のウィジェットに置き換える必要があります。 JSが無効になっているときは、通常の選択ボックスがその場所にあることを確認してください。これにより、より多くのユーザーがフォームを使用でき、アクセシビリティに役立ちます。

5
alex

ほとんどのブラウザは、cssを使用した選択タグのカスタマイズをサポートしていません。しかし、選択タグのスタイル設定に使用できるこのjavascriptを見つけました。ただし、通常どおり、IEブラウザーはサポートされていません。

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Onchange属性が機能しないというエラーに気づいた

4
SRI

私はこれを見つけましたが、これは本当に良いようです。

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

4
Jenny

JQueryを使用しないソリューションがある場合。実際の例を見ることができるリンク： http://www.letmaier.com/_selectbox/select_general_code.html （より多くのcssでスタイル設定）

私のソリューションのスタイルセクション：

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

Body-tag内のHTMLコード：

<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>
2
Christoph Letmaier

2014年に更新：これにはjQueryは必要ありません。 StyleSelect を使用して、jQueryなしで選択ボックスを完全にスタイルできます。たとえば、次の選択ボックスがある場合：

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

styleSelect('select.demo')を実行すると、次のようなスタイル選択ボックスが作成されます。

enter image description here

2
mikemaccana

数日前にjQueryプラグインSelectBoxItを作成しました。通常のHTML選択ボックスの動作を模倣しようとしますが、jQueryUIを使用して選択ボックスをスタイル設定およびアニメーション化することもできます。見て、あなたの考えを教えてください。

http://www.selectboxit.com

1
Greg Franko

これは古いようですが、ここでは非常に興味深いプラグインです- http://uniformjs.com

1
rzr

ikSelectのようなjQueryプラグインを使用してみてください。

非常にカスタマイズ可能で使いやすいものにしようとしました。

http://github.com/Igor10k/ikSelect

1
i10k

これはTwitter-bootstrapスタイルを使用してselectin dropdownメニューを有効にします https://github.com/silviomoreto/bootstrap-select

0
anacarolinats