CSSを使ってcheckboxやradioの見た目をキュートに変える方法

エンジニアの山岡です。

お問い合わせなどのフォームをCSSで装飾する時、inputやtextareaはサクッと見た目を変えられますが、checkboxやradioは一筋縄ではいきません。

イマイチなデフォルトスタイルから……

ラブリーでキュートかつ、クールでアメイジングでスタイリッシュなチェックボックスやラジオボタンにしたい！

そんな時は、labelとinput[type=checkbox]（またはinput[type=radio]）を組み合わせて実装する方法がオススメです。

• サンプル1: キュートなチェックボックス・ラジオボタン
• サンプル2: より主張する＆「押した感」をプラス
• サンプル3: チェックした瞬間の動きで「遊び」と「楽しさ」をプラス

サンプル1

こちらは、いなべ山女子フェスタ公式サイトのエントリーページで使用したスタイルです。
女性がターゲットということで、可愛さを演出するピンクのチェックボックスになりました。

DEMO

お見積もり 資料請求 ご相談
パソコン スマホ

HTML

<!--チェックボックス01-->
<input type="checkbox" id="01-A" name="checkbox01" checked="checked">
<label for="01-A" class="checkbox01">お見積もり</label>
<input type="checkbox" id="01-B" name="checkbox01">
<label for="01-B" class="checkbox01">資料請求</label>
<input type="checkbox" id="01-C" name="checkbox01">
<label for="01-C" class="checkbox01">ご相談</label>

<!--ラジオボタン01-->
<input type="radio" id="01-D" name="radio01" checked="checked">
<label for="01-D" class="radio01">パソコン</label>
<input type="radio" id="01-E" name="radio01">
<label for="01-E" class="radio01">スマホ</label>

CSS

/* チェックボックス01 */
input[type=checkbox] {
    display: none;
}
.checkbox01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.checkbox01::before {
    background: #fff;
    border: 1px solid #231815;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.checkbox01::after {
    border-right: 3px solid #ed7a9c;
    border-bottom: 3px solid #ed7a9c;
    content: '';
    display: block;
    height: 9px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 5px;
}
input[type=checkbox]:checked + .checkbox01::after {
    opacity: 1;
}

/* ラジオボタン01 */
input[type=radio] {
    display: none;
}
.radio01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.radio01::before {
    background: #fff;
    border: 1px solid #231815;
    border-radius: 50%;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.radio01::after {
    background: #ed7a9c;
    border-radius: 50%;
    content: '';
    display: block;
    height: 10px;
    left: 9px;
    margin-top: -4px;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 10px;
}
input[type=radio]:checked + .radio01::after {
    opacity: 1;
}

サンプル2

サンプル１よりも主張する感じにしてみました。
押す前と押した後で枠線の色の濃さを変化させることにより、押した感を出しています。

DEMO

HTML

<!--チェックボックス02-->
<input type="checkbox" id="02-A" name="checkbox02" checked="checked">
<label for="02-A" class="checkbox02">お見積もり</label>
<input type="checkbox" id="02-B" name="checkbox02">
<label for="02-B" class="checkbox02">資料請求</label>
<input type="checkbox" id="02-C" name="checkbox02">
<label for="02-C" class="checkbox02">ご相談</label>

<!--ラジオボタン02-->
<input type="radio" id="02-D" name="radio02" checked="checked">
<label for="02-D" class="radio02">パソコン</label>
<input type="radio" id="02-E" name="radio02">
<label for="02-E" class="radio02">スマホ</label>

CSS

/* チェックボックス02 */
input[type=checkbox] {
    display: none;
}
.checkbox02 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.checkbox02::before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.checkbox02::after {
    border-right: 6px solid #00cccc;
    border-bottom: 3px solid #00cccc;
    content: '';
    display: block;
    height: 20px;
    left: 7px;
    margin-top: -16px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 9px;
}
input[type=checkbox]:checked + .checkbox02::before {
    border-color: #666;
}
input[type=checkbox]:checked + .checkbox02::after {
    opacity: 1;
}

/* ラジオボタン02 */
input[type=radio] {
    display: none;
}
.radio02 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.radio02::before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.radio02::after {
    background: #00cccc;
    border-radius: 50%;
    content: '';
    display: block;
    height: 8px;
    left: 10px;
    margin-top: -3px;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 8px;
}
input[type=radio]:checked + .radio02::before {
    border-color: #666;
}
input[type=radio]:checked + .radio02::after {
    opacity: 1;
}

サンプル３

サンプル2に動きを付けてみました。
チェックした瞬間のふわっと浮き出る動きが、ちょっとした楽しさを感じさせてくれます。

アニメーションには、transformとopacityを使っています。

DEMO

HTML

<!--チェックボックス03-->
<input type="checkbox" id="03-A" name="checkbox03" checked="checked">
<label for="03-A" class="checkbox03">お見積もり</label>
<input type="checkbox" id="03-B" name="checkbox03">
<label for="03-B" class="checkbox03">資料請求</label>
<input type="checkbox" id="03-C" name="checkbox03">
<label for="03-C" class="checkbox03">ご相談</label>

<!--ラジオボタン03-->
<input type="radio" id="03-D" name="radio03" checked="checked">
<label for="03-D" class="radio03">パソコン</label>
<input type="radio" id="03-E" name="radio03">
<label for="03-E" class="radio03">スマホ</label>

CSS

/* チェックボックス03 */
input[type=checkbox] {
    display: none;
}
.checkbox03 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.checkbox03::before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.checkbox03::after {
    border-right: 6px solid #fedd1e;
    border-bottom: 3px solid #fedd1e;
    content: '';
    display: block;
    height: 20px;
    left: 7px;
    margin-top: -16px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    width: 9px;
}
input[type=checkbox]:checked + .checkbox03::before {
    border-color: #666;
}
input[type=checkbox]:checked + .checkbox03::after {
    opacity: 1;
    transform: rotate(45deg) scale3d(1,1,1);
}

/* ラジオボタン03 */
input[type=radio] {
    display: none;
}
.radio03 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.radio03::before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.radio03::after {
    background: #fedd1e;
    border-radius: 50%;
    content: '';
    display: block;
    height: 10px;
    left: 9px;
    margin-top: -4px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: scale3d(.3,.3,1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    width: 10px;
}
input[type=radio]:checked + .radio03::before {
    border-color: #666;
}
input[type=radio]:checked + .radio03::after {
    opacity: 1;
    transform: scale3d(1,1,1);
}

まとめ

今回はCSSでスタイリングしたチェックボックスとラジオボタンのサンプルを３つご紹介しました。見た目は様々ですが基本は同じです！

カスタマイズして、あなただけのオリジナルデザインを作ってみてくださいね。
楽しいフォームを作りましょう！