あなたのお役に立ちたいわんど。

セレクトボックスを作ろう

セレクトボックスにデザインを適用したい事はありませんか？
そんな悩みに直面したかねです。
今回はラジオボタンを利用したセレクトボックスの作り方についてメモしていきたいと思います。

内容


1,ラジオボタンを使ってリストを作ろう
2,JQueryを使って選択されたリストにクラスをつけよう
3,リストにデザインを適用使用

作成したセレクトボックス


demoを作成してます。
demo
デモではセレクトボックスを変更できたからこそ！
という事で、animationで少し遊んでいます。
demoのテキストフィールドはリストが伸びたときにどうなるかを表示しています。

確認結果で確認してみてください。

解説

1,ラジオボタンを使ってリストを作ろう

実際にコードを作っていきましょう。

<ul>
 <li><!--liの部分を増やすことでオプションを増やすことができます-->
  <label for="ap-radio_a">
   アイウエオ<!--オプションの代わりになる部分-->
   <input id="ap-radio_a" class="hidden" checked="checked" name="radio" type="radio" value="アイウエオ" />
  </label>
 </li>
</ul>

2,JQueryを使って選択されたリストにクラスをつけよう

セレクトボックスをアコーディオン化させます。

jQuery(function($){
 // セレクトボックスをクリックで開く
 $('.ap-radio_wrap').off().on('click',function(){
  $(this).toggleClass('open');
 });
});

初期値であるcheckedを入れたlabelを一番上に移動させます。

jQuery(function($){
 // 初期に表示したいラベル表示
 $('.ap-radio_wrap input').each(function(){
  var p = $(this).prop('checked');
   if (p) {
     $(this).parents('li').addClass('active');
   }
 });
});

valueに変化があれば、クリックしたlabelを一番上に移動させます。
クリック時にアコーディオンを閉じます。

jQuery(function($){
 // セレクト後に表示する値取得
 $('.ap-radio_wrap input').change(function(){
  var p = $(this).prop('checked');
  if (p) {
   $('.ap-radio_wrap input').parents('li').removeClass('active');
   $('.ap-radio_wrap').trigger('click');
   $(this).parents('li').addClass('active');
  }
 });
});

選択されているlabelをクリックした場合にアコーディオンを閉じます。

jQuery(function($){
 // 選択された値をクリックした時セレクトボックスを閉じる
 $('.ap-radio_wrap > li').off().on('click',function(e){
  if($(this).hasClass('active')){
   $('.ap-radio_wrap').removeClass('open');
   e.stopPropagation();
  }
 });
});

3,リストにデザインを適用

//ラジオボタンを隠す為の共通クラス
.hidden {
        display: none;
      }
//セレクトボックスの箱
.ap-form_select {
        height: 30px;
      }
.ap-radio_wrap {
        list-style: none;
        height: 30px;
        width: 100px;
        position: relative;
        padding: 0;
        border: 1px solid #000;
      }
//アコーディオンが閉じている場合にlabelをクリックしない魔法
.ap-radio_wrap::after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 2;
      }
//アコーディオンを閉じる
.ap-radio_wrap > li {
        line-height: 30px;
        position: absolute;
        background: #fff;
      }
//クラスactiveがある場合一番上
.ap-radio_wrap > li.active {
        z-index: 1;
      }
//アコーディオンを開く
.ap-radio_wrap.open{
        height: auto;
      }
.ap-radio_wrap.open > li{
        position: relative;
      }
.ap-radio_wrap.open > li > label{
        display: block;
      }
//アコーディオンが閉じている場合にlabelをクリックしない魔法を解除
.ap-radio_wrap.open::after {
        display: none;
      }

コード全体


デモサイトのコードとなります。
追加した場合の挙動として、参考にしてください。

<h1>ラジオボタンテスト</h1>

    <form class="ap-form" action="demo_01.php" method="post">
      <div class="ap-form_select">
      <ul class="ap-radio_wrap">
        <li>
          <label for="ap-radio_a">
            アイウエオ
            <input id="ap-radio_a" class="hidden" type="radio" checked name="radio" value="アイウエオ">
          </label>
        </li>
        <li>
          <label for="ap-radio_b">
            カキクケコ
            <input id="ap-radio_b" class="hidden" type="radio" name="radio" value="カキクケコ">
          </label>
        </li>
        <li>
          <label for="ap-radio_c">
            サシスセソ
            <input id="ap-radio_c" class="hidden" type="radio" name="radio" value="サシスセソ">
          </label>
        </li>
        <li>
          <label for="ap-radio_d">
            タチツテト
            <input id="ap-radio_d" class="hidden" type="radio" name="radio" value="タチツテト">
          </label>
        </li>
        <li>
          <label for="ap-radio_e">
            ナニヌネノ
            <input id="ap-radio_e" class="hidden" type="radio" name="radio" value="ナニヌネノ">
          </label>
        </li>
      </ul>
    </div>
    <input type="text" name="text" value="">
    <input type="submit" name="" value="確認">
    </form>
    <div class="">
      <h3>確認結果</h3>
      <div>
          <?php
        isset($_POST['radio']);
        echo $_POST['radio'];
        ?>
      </div>
      <div>
          <?php
        isset($_POST['text']);
        echo $_POST['text'];
        ?>
      </div>
    </div>

jQuery(function($){
        // セレクトボックスをクリックで開く
        $('.ap-radio_wrap').off().on('click',function(){
          $(this).toggleClass('open');
        });
        // 選択された値をクリックした時セレクトボックスを閉じる
        $('.ap-radio_wrap > li').off().on('click',function(e){
          if($(this).hasClass('active')){
            $('.ap-radio_wrap').removeClass('open');
            e.stopPropagation();
          }
        });
        // 初期に表示したいラベル表示
        $('.ap-radio_wrap input').each(function(){
          var p = $(this).prop('checked');
          if (p) {
            $(this).parents('li').addClass('active');
          }
        });
        // セレクト後に表示する値取得
        $('.ap-radio_wrap input').change(function(){
          var p = $(this).prop('checked');
          var v = $(this).val();
          if (p) {
            $('.ap-radio_wrap input').parents('li').removeClass('active');
            $('.ap-radio_wrap').trigger('click');
            $(this).parents('li').addClass('active');
          }
        });
      });

.hidden {
        display: none;
      }
      .ap-form_select {
        height: 30px;
      }
      .ap-radio_wrap {
        list-style: none;
        height: 30px;
        width: 100px;
        position: relative;
        padding: 0;
        border: 1px solid #990033;
        border-radius: 30px;
        overflow: hidden;
      }
      .ap-radio_wrap::after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 2;
      }
      .ap-radio_wrap > li {
        line-height: 30px;
        position: absolute;
        background: #fff;
        display: flex;
        align-items: center;
        width: 100%;
      }
      .ap-radio_wrap > li.active:first-child {
        z-index: 1;
        background: #fff;
      }
      .ap-radio_wrap > li.active:first-child > label {
        z-index: 1;
        animation: 5s kurukuru alternate infinite;
      }
      .ap-radio_wrap > li.active:nth-child(2) {
        z-index: 1;
        animation: .1s gakuburu alternate infinite;
      }
      .ap-radio_wrap > li.active:nth-child(3) {
        z-index: 1;
        background: #fff;
      }
      .ap-radio_wrap > li.active:nth-child(3) > label {
        z-index: 1;
        animation: 5s kurukuru-yoko alternate infinite;
      }
      .ap-radio_wrap > li.active:nth-child(4) {
        z-index: 1;
        animation: 5s zoom alternate infinite;
      }
      .ap-radio_wrap > li.active:last-child {
        z-index: 1;
        background: #fff;
      }
      .ap-radio_wrap > li.active:last-child > label {
        z-index: 1;
        animation: .3s flick alternate infinite;
      }
      @keyframes kurukuru {
        0% {
          transform: rotateX(0deg);
        }
        50% {
          transform: rotateX(180deg);
        }
        100% {
          transform: rotateX(360deg);
        }
      }
      @keyframes kurukuru-yoko {
        0% {
          transform: rotateY(0deg);
        }
        50% {
          transform: rotateY(180deg);
        }
        100% {
          transform: rotateY(360deg);
        }
      }
      @keyframes gakuburu {
        0% {
          transform: translateX(1px);
        }
        100% {
          transform: translateX(2px);
        }
      }
      @keyframes zoom {
        0% {
          transform: scale(1,1);
        }
        50% {
          transform: scale(1,1.3);
        }
        100% {
          transform: scale(1,1);
        }
      }
      @keyframes flick {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      .ap-radio_wrap.open{
        height: auto;
        border-radius: 0px;
        overflow: hidden;
      }
      .ap-radio_wrap.open::after {
        display: none;
      }
      .ap-radio_wrap.open > li{
        position: relative;
      }
      .ap-radio_wrap > li::before {
        content: "";
        display: block;
        position: absolute;
        right: 10px;
        width: 5px;
        border-right: 5px solid;
        border-bottom: solid 5px transparent;
        border-top: transparent 5px solid;
        border-left: 5px solid transparent;
      }
      .ap-radio_wrap > li::after {
        content: "";
        display: block;
        position: absolute;
        right: 5px;
        width: 5px;
        height: 3px;
        background: #000;
      }
      .ap-radio_wrap.open > li > label{
        position: relative;
        display: block;
        box-sizing: border-box;
      }
      .ap-radio_wrap.open > li:first-child > label{
        border: hidden;
      }

まとめ


セレクトボックスのデザインを変更できることで、サイトデザインに合わせたデザインをできます。
背景色やボーダー、角丸など多種多様です。
セレクトボックス以外にも、もしかしたらいろんなものに使えるかもしれません。
ぜひ使ってみてください！

そしてわからないことや相談がありましたら、株式会社あんどぷらすへ！

こちらもおすすめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

＜ すべての記事を見る ＞

Web制作の株式会社あんどぷらす
ECサイト構築サービス「ウルトコ」
イベントスペース「fuigo」
CS-Cartの情報ポータル「STOCK」
MENU