145

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

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

私は知っています、グーグル、しかし私は過去2時間探していました、そして私は私のニーズを満たすものを見つけていません。

次のようにする必要があります。

  • jQuery1.3.2と互換性があります
  • アクセス可能
  • 目立たない
  • 選択ボックスのあらゆる側面のスタイリングに関して完全にカスタマイズ可能

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

4

15 に答える 15

45

<select>を に変換し<ol>、<option>をに変換する jQuery プラグインをいくつか見たことがあり<li>ます。これにより、CSS でスタイルを設定できます。自分で巻くのはそれほど難しくありません。

ここに 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;
}
于 2009-07-02T03:10:27.873 に答える
18

更新: 2013 年の時点で、私が見た中でチェックする価値があるのは次の 2 つです。

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

うん！

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

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

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

ここに画像の説明を入力

于 2012-10-07T20:14:12.690 に答える
14

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 は独自のことを行います。

于 2010-06-18T17:39:53.267 に答える
11

これを行うための簡単でまともな方法を見つけました。クロスブラウザーであり、分解可能で、フォームの投稿を壊しません。まず、選択ボックスの不透明度を 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>

div の innerHTML を JavaScript で更新します。jQueryで簡単に:

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

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

このソリューションは {-webkit-appearance: none;} よりも優れていると思います。ブラウザがすべきことは、フォーム要素との相互作用を指示することですが、サイトのデザインを壊すため、ページに最初に表示される方法は絶対に指示しないでください。

于 2012-03-11T19:17:57.873 に答える
10

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

  • 要素の閉じた状態をカスタマイズすることに夢中になる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で確認してください。

于 2011-03-09T04:19:33.863 に答える
5

CSSだけである程度スタイリングできます

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

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

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

于 2009-07-02T03:06:11.877 に答える
4

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

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

于 2011-12-28T21:13:07.010 に答える
4

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

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

于 2010-11-22T11:45:33.353 に答える
1

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

http://www.selectboxit.com

于 2012-04-18T06:01:10.130 に答える
1

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

于 2012-08-11T07:45:07.783 に答える
1

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

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

http://github.com/Igor10k/ikSelect

于 2012-05-04T21:59:54.477 に答える
0

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

于 2013-03-13T15:08:37.147 に答える