1
/
5

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

山岡 慈美
Ryo Yamaoka
山岡 慈美, Ryo Yamaoka
カスタマーサクセス、フォトグラファー, CEO / CTO
山岡 慈美
山岡 慈美
株式会社エコムクリエーション / カスタマーサクセス、フォトグラファー
Follow
Ryo Yamaoka
Ryo Yamaoka
株式会社エコムクリエーション / CEO / CTO
Follow
on 2022-04-14

エンジニアの山岡亮です。

お問い合わせなどのフォームをCSSで装飾する時、inputやtextareaはサクッと見た目を変えられますが、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

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

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

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

株式会社エコムクリエーション's job postings
デザイン エンジニア テックブログ Webディレクター コーダー

株式会社エコムクリエーション

当社は、広告デザインとWeb制作をしているデザイン会社です。 人気観光施設や医療ベンチャー企業、バリスタ日本チャンピオンのコーヒーショップなど、ジャンルを問わず様々なクライアントに高いデザイン性とWebの技術を駆使したサービスを提供しています。 【主な制作物】 コーポレートサイト： デザインとシステムの両面から最適な課題解決を提案し、事業のイメージアップはもちろん、社内の業務フローの改善もサポートします。 ECサイト： ショッピングカートシステムやオンライン決済の導入、デザイン、システムの組み込みを行います。 ロゴ： クライアントの事業内容や想いをヒアリングし、ロゴデザインを制作します。 チラシ・ポスター： サイズを問わず、キャンペーンやセールスプロモーションに合わせた広告デザインを行います。 パンフレット： 会社案内や採用パンフ、園内マップ、テイクアウトメニュー、イベントパンフ、観光案内資料など用途に応じた多種多様なパンフレットの制作を行います。 ほかにも、 ・プロモーションビデオ ・AR、VR ・商品パッケージ ・ノベルティ ・看板 ・名刺、ショップカード ・はがき、ポストカード ・イラスト制作 ・写真撮影 など様々なものをデザインしています。

エンジニア

Weekly ranking

Show other rankings