inputタグのcheckboxとradioボタンでできる事まとめ

フォームの中の選択項目として利用するinputタグのcheckboxとradioボタン。
どちらも選択肢を選ぶ目的で古(いにしえ)から伝わる方法です。

そんなcheckboxとradioボタンを使い、JavaScriptなどは使わずにできるカスタマイズ方法をまとめました。

本来の使い方、フォームの中の選択項目として

<label><input type="checkbox" name="question" value="answer1">選択肢1</label>
<label><input type="checkbox" name="question" value="answer2">選択肢2</label>
<label><input type="checkbox" name="question" value="answer3">選択肢3</label>

オーソドックスでポピュラーなinputタグのチェックボックスのソースです。
フォームなどでチェックボックスや、ラジオボタンを使う時は、labelタグを使いましょう。
labelタグを使うことによって、クリックの範囲が広がるのでユーザビリティとアクセシビリティの向上が図れます。

labelタグの使い方としては、inputタグとテキストを囲む方法と、inputタグにID属性を設定し紐付ける方法があります。

<input type="checkbox" name="question" value="answer1" id="id1">
<label for="id1">選択肢1</label>
<input type="checkbox" name="question" value="answer2" id="id2">
<label for="id2">選択肢2</label>
<input type="checkbox" name="question" value="answer3" id="id3">
<label for="id3">選択肢3</label>

もちろんlabelタグは必須ではありませんが、アクセシビリティの観点から考えると、「デフォルトで」と言っても過言ではないと思います。

では、上記のチェックボックス、ラジオボタンを応用して、デザインも含んだチェックボックス・ラジオボタンを紹介します。

切り替えボタン風に見せる

デモボタン1

iPhone風なボタンです。
デモを押してもらえればわかると思います。
直感的に操作できるので、説明不要で分かりやすいです。

デモボタン2

こちらは、「その１」よりシンプルなボタンです。

上記2つのボタンの実装方法に関しては下記をご覧ください。

タブ切り替え表示

当サイトのトップページにも設置している切り替えタブ。
こちらはラジオボタンで実装しています。もちろんJavaScript等も不要。

上記の記事はワードプレステーマCocoonのカスタマイズ用に書きましたが、シンプルにタブ切り替え箇所だけ、抜粋しました。
デモ画面は下記のボタンから。

HTML

<div class="front-top-page top-page">
     <input id="tab1" type="radio" name="tab_item" checked>
     <input id="tab2" type="radio" name="tab_item">
     <input id="tab3" type="radio" name="tab_item">
     <input id="tab4" type="radio" name="tab_item">
     <div class="tab-switching">
         <label class="tab-btn" for="tab1">コンテンツ１つ目</label>
         <label class="tab-btn" for="tab2">コンテンツ2つ目</label>
         <label class="tab-btn" for="tab3">コンテンツ3つ目</label>
         <label class="tab-btn" for="tab4">コンテンツ4つ目</label>
     </div>
     <div class="tab-cont tb1">
         <p>コンテンツ１つ目</p>
     </div>
     <div class="tab-cont tb2">
         <p>コンテンツ２つ目</p>
     </div>
     <div class="tab-cont tb3">
         <p>コンテンツ３つ目</p>
     </div>
     <div class="tab-cont tb4">
         <p>コンテンツ４つ目</p>
     </div>
 </div>

CSS

.tab-switching{
    margin: 10px 0 20px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 3px 10px -2px rgba(0,0,0,.2);
}
.tab-switching label{
    width: calc(100% / 4);
    padding: 10px;
    text-align: center;
    background: #eee;
    transition: .5s;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
    cursor: pointer;
}
#tab1:checked ~ .tab-switching label[for="tab1"],
#tab2:checked ~ .tab-switching label[for="tab2"],
#tab3:checked ~ .tab-switching label[for="tab3"],
#tab4:checked ~ .tab-switching label[for="tab4"],
.tab-switching label:hover{
    background: #aaa; /* 選択・マウスオーバー時のタブの色。お好きな色に */
}
.tab-switching label,
.tab-switching label:last-of-type{
    border-right: none;
}
.tab-cont,
input[name="tab_item"]{
    display: none;
}
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
#tab1:checked ~ .tab-cont.tb1,
#tab2:checked ~ .tab-cont.tb2,
#tab3:checked ~ .tab-cont.tb3,
#tab4:checked ~ .tab-cont.tb4{
    display: block;
    animation: show 1s;
}

モーダルウィンドウ設置

簡易なモーダルウィンドウならチェックボックスでも作れます。

ただ、ポップアップされたコンテンツを注目させる為に、背景を黒くしたりするのは、CSSだけでできない事もないのですが、モーダルウィンドウは要素が離れる場合があるのでJavaScriptなどを使って背景要素を挿入させた方が楽です。

ですので、その点を踏まえ、あくまでも簡易なモーダルウィンドウです。

HTML

<div class="modal">
     <input id="modal1" type="checkbox">
     <label for="modal1" class="modal-btn">詳しく見る</label>
     <div class="modal-cont">
         <h3>モーダルのコンテンツ</h3>
         <p>
             中身です。中身です。<br>
             中身です。中身です。中身です。中身です。<br>
             中身です。中身です。中身です。中身です。<br>
             中身です。中身です。中身です。中身です。<br>
             中身です。中身です。
         </p>
         <label for="modal1" class="modal-close">閉じる</label>
     </div>
 </div>

CSS

.modal input{
    display: none;
}
.modal label{
    margin-top: 20px;
    cursor: pointer;
    display: inline-block;
}
.modal label.modal-btn{
    padding: 10px;
    border-radius: 5px;
    background: #eee;
    transition: .5s;
}
.modal label.modal-btn:hover,
.modal-cont label.modal-close:hover{
    background: #333;
    color: #AF975E;
}
.modal-cont{
    max-width: 500px;
    max-height: 500px;
    padding: 20px;
    position: fixed;
    top: calc(50% - 250px);
    left: calc(50% - 250px);
    background: #eee;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
.modal-cont p{
    line-height: 1.5;
}
.modal-cont label.modal-close{
    padding: 5px;
    background: #333;
    border-radius: 5px;
    color: #FFF;
    transition: .5s;
}
modal1:checked ~ .modal-cont{
    opacity: 1;
    visibility: visible;
}

サイドスライドメニュー

簡易で最小限のソースですが、JavaScriptを使わず、スライドメニューを実装できます。

HTML

<input id="menu1" type="checkbox">
<label for="menu1" class="back"></label>
<nav class="menu">
    <ul>
        <li><a href="#">メニュー１</a></li>
        <li><a href="#">メニュー２</a></li>
        <li><a href="#">メニュー３</a></li>
        <li><a href="#">メニュー４</a></li>
        <li><a href="#">メニュー５</a></li>
        <li><a href="#">メニュー６</a></li>
        <li><a href="#">メニュー７</a></li>
    </ul>
    <label for="menu1">閉じる</label>
</nav>
<section>
    <label for="menu1" class="menu_btn">メニュー展開</label>
</section>

注意点はnav要素など、inputタグと同じDOMの階層に置くこと。

CSS

input#menu1{
    display: none;
}
/* メニュー展開時の背景 */
.back{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.6);
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
input#menu1:checked ~ label.back{
    opacity: 1;
    visibility: visible;
}
/* スライドコンテンツ */
.menu{
    width: 80%;
    max-width: 400px;
    height: 100%;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    background: #f1f1f1;
    transform: translateX(100%);
    transition: .5s;
    overflow-y: scroll;
}
/* 左からのスライドの場合
.menu{
    width: 80%;
    max-width: 400px;
    height: 100%;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background: #f1f1f1;
    transform: translateX(-100%);
    transition: .5s;
    overflow-y: scroll;
}
*/
input#menu1:checked ~ .menu{
    transform: translateX(0);
}
/* 閉じるボタン */
.menu label{
    margin: 10px 0 0 10px;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 5px;
    background: #333;
    color: #FFF;
    cursor: pointer;
    transition: .5s;
}
.menu label:hover,
.menu li a:hover,
.menu_btn:hover{
    background: #af975e;
    color: #FFF;
}
/* メニューリスト */
.menu li a{
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #bbb;
    display: block;
    text-decoration: none;
    color: #333;
    transition: .5s;
}
.menu li:first-of-type a{
    border-top: 1px solid #bbb;
}
/*  メニュー展開ボタン */
.menu_btn{
    padding: 10px 10px 10px 40px;
    background: #eee;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    transition: .5s;
}
.menu_btn::before,
.menu_btn::after{
    content: '';
    width: 20px;
    margin: auto;
    border-top: 2px solid #666;
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    box-sizing: border-box;
    transition: .5s;
}
.menu_btn::before{
    height: 18px;
    border-bottom: 2px solid #666;
}
.menu_btn::after{
    height: 0;
}
.menu_btn:hover::before,
.menu_btn:hover::after{
    border-color: #FFF;
}

checkboxとradioボタンまとめ

inputタグのチェックボックスとラジオボタンを使うといろんな見せ方ができます。
擬似クラスの:checkedを使うと一気にできる事が増えます。

少し見せ方を変えるだけで、小さな部分ではありますが、ユーザビリティ、アクセシビリティの向上になり、エンドユーザーから良い反響があるかもしれません。

JavaScript等も省け軽量にも繋がる部分があるので、見直してみるのも良いかもしれません。