選択ボックスのスタイルを設定することはできますか？[閉まっている]

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

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

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

それは：

• jQuery 1.3.2と互換性があります
• アクセシブル
• 邪魔にならない
• 選択ボックスのあらゆる側面のスタイリングに関して完全にカスタマイズ可能

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

CSSでスタイルを設定できるように、 ' を'に、' <select>を<ol>'に変換するjQueryプラグインをいくつか見かけました。自分でロールバックするのは難しくありません。<option><li>

ここに1つあります：https : //gist.github.com/1139558（ここでは彼に使用されていましたが、サイトがダウンしているようです）

次のように使用します。

$('#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;
}

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

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

うん！

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

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

そして、これがさまざまなモードのプレビューです：

CSSに関しては、特にFF 3.5以降から、Mozillaが最も親しみやすいようです。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はそれ自身のことをします。

これを行うためのシンプルで適切な方法を見つけました。クロスブラウザで、分解可能で、フォームの投稿を壊しません。まず、選択ボックスの不透明度を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によるEasypeasy：

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

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

このソリューションは{-webkit-appearance：none;}に勝ると思います。ブラウザがせいぜい何をすべきかは、フォーム要素との相互作用を指示することですが、サイトのデザインを損なうため、ブラウザが最初にページにどのように表示されるかは間違いありません。

あなたがたいと思うならここに小さなプラグがあります

• 要素の閉じた状態のカスタマイズに夢中になるselect
• ただし、開いた状態では、選択オプション（スクロールホイール、矢印キー、タブフォーカス、Ajaxのへの変更options、適切な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で確認してください。

CSSだけである程度スタイルを設定できます

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

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

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

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

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

私はこれを本当に良さそうに見つけました。

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

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タグ内の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>

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')すると、次のようにスタイル付き選択ボックスが作成されます。

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

http://www.selectboxit.com

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

私はそれを非常にカスタマイズ可能で使いやすいようにしようとしました。

http://github.com/Igor10k/ikSelect

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

これは、twitter-bootstrapスタイルを使用selectしてdropdownメニューhttps://github.com/silviomoreto/bootstrap-selectをオンにします

シンプルな解決策は、div内で選択ボックスをワープし、デザインに一致するdivをスタイル設定することです。opacity：0を選択ボックスに設定すると、選択ボックスが非表示になります。jQueryでスパンタグを挿入し、ユーザーがドロップダウン値を変更した場合はその値を動的に変更します。このチュートリアルで示されている完全なデモとコードの説明。それがあなたの問題を解決することを願っています。

JQueryコードは次のようになります。

 <script>
   $(document).ready(function(){
     $('.dropdown_menu').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>