PR TIMESデザイナー&エンジニアブログ BREAK TIMES

PR TIMES Developer Blog(デザイナー&エンジニアによる開発者ブログ)

PR TIMES Developer Blog
デザイナー&エンジニアによる開発者ブログ

ラジオボタン・チェックボックスをオリジナルデザインに

PR TIMESフロント・エンジニアの山田です。
ラジオボタンチェックボックスにスタイルで色などを設定しても、実際にはブラウザで見ても反映されません。
それでもデザインに合わせてユーザーが使いやすいように、見た目を変更したい場合があります。今回はその方法をご紹介します。

まずは通常どおりHTMLにラジオボタンを記述します。

<input type="radio" name="radiosample" value="1" id="radiosampleid1" checked><label for="radiosampleid1" class="radio">Radio Sample1</label>
<input type="radio" name="radiosample" value="2" id="radiosampleid2"><label for="radiosampleid2" class="radio">Radio Sample2</label>

次にスタイルシートの設定です。(ベンダープレフィックスは省略してあるので適宜設定してください)

input[type=radio] { display: none; }
input[type=radio]:checked + .radio:before { opacity: 1; }
.radio { box-sizing: border-box; position: relative; display: inline-block; margin: 0 20px 0 0; padding: 0 0 0 30px; vertical-align: middle; cursor: pointer; }
.radio:hover:after { border-color: #27d2ff; }
.radio:after { position: absolute; top: 50%; left: 0; display: block; margin-top: -12px; width: 18px; height: 18px; border: 2px solid #bbb; border-radius: 50%; content: ''; }
.radio:before { position: absolute; top: 50%; left: 6px; display: block; margin-top: -6px; width: 10px; height: 10px; border-radius: 50%; background-color: #2C9AB7; content: ''; opacity: 0; }


実際のラジオボタンにスタイルが適用できないので、それらはdisplay:noneで非表示にします。
その上で、ラベルのbeforeとafterに擬似のラジオボタンを描画して位置を調整。

これで見た目オリジナルデザインのラジオボタンが出来上がりました。


チェックボックスも同様です。

<input type="checkbox" name="checksample1" value="1" id="checksampleid1" checked><label for="checksampleid1" class="check">Check Sample1</label>
<input type="checkbox" name="checksample2" value="1" id="checksampleid2"><label for="checksampleid2" class="check">Check Sample2</label>
input[type=checkbox] { display: none; }
input[type=checkbox]:checked + .check:before { opacity: 1; }
.check { box-sizing: border-box; position: relative; display: inline-block; margin: 0 20px 0 0; padding: 0 0 0 30px; vertical-align: middle; cursor: pointer; }
.check:hover:after { border-color: #27d2ff; }
.check:after { position: absolute; top: 50%; left: 0; display: block; margin-top: -12px; width: 18px; height: 18px; border: 2px solid #bbb; border-radius: 3px; content: ''; }
.check:before { position: absolute; top: 50%; left: 7px; display: block; margin-top: -9px; width: 5px; height: 10px; border-right: 3px solid #2C9AB7; border-bottom: 3px solid #2C9AB7; transform: rotate(45deg); content: ''; opacity: 0; }