fbpx

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

エンジニアの山岡です。

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

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

デフォルトスタイルのcheckboxとradio

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

CSSでスタイリングしたcheckboxとradio

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

サンプル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

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

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;
}

サンプル3

サンプル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でスタイリングしたチェックボックスとラジオボタンのサンプルを3つご紹介しました。見た目は様々ですが基本は同じです!

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