[jquery]nice-selectを使った

nice-selectとは?

セレクトボックスを使うとき、オプションの背景色(選ぶときの青色)を変更したくて
擬似セレクトボックスを使うことにしました。(CSSじゃ上手くいきませんでしたorz)
nice-selectは既に設置されているselectboxを元に擬似セレクトボックスを作ってくれます。
こんな感じになります。

使ってみる

github / 公式

公式またはgithubからjquery.nice-select.jsとcssをダウンロードします。bowerを使う場合は下記。

bower install jquery-nice-select
<script src="../bower_components/jquery-nice-select/js/jquery.nice-select.js"></script>
<link rel="stylesheet" href="../bower_components/jquery-nice-select/css/nice-select.css" />

jqueryと一緒に上記を読み込んでから下記のようにjqueryのセレクタに対してniceSelect()を呼び出してあげると
擬似セレクタが表示されます。元のセレクトボックスはdisplay:none;されています。

$(function(){
  $("#fruits").niceSelect(); 
});

あとは表示されたセレクトボックスのCSSをいじってやると、オリジナルのそれっぽいセレクトボックス完成です。

以上、nice-selectでした 😀

JavaScriptプログラミング
独学に限界を感じたら、オンラインのプログラミングスクールへ...
  • Code ViIlage
      挫折させない本気のプログラミングスクール。学習継続率93.3%・卒業生800名以上。
  • DMM WEBCAMP
      働きながら自分のペース学んでエンジニア転職。無料カウンセリング満足度99%!
  • TECH CAMP
      無料カウンセリング満足度95%!本業に活かせる。キャリアアップにつながる。
  • TechAcademy
      現役エンジニアから学べるオンラインに特化したプログラミングスクール。
  • テックパートナーズカレッジ
      WEBシステム開発会社のノウハウが学べるオンラインスクール。14日無料体験有り!
  • \ PHP・Laravelに特化したオンラインスクール /
    yasuakiをフォローする
    codelikeなブログ

    コメント

    タイトルとURLをコピーしました