今回はフォームのラジオボタン・チェックボックスのデザインをフラットボタンのカスタマイズする方法を解説します。
今回の方法はコピペで簡単に設置できますので、ぜひ試して下さい。
チェックボックスをカスタマイズする
html5のinput要素のtype=”checkbox”をcssでフラットボタンのデザインに装飾します。
表示サンプル
チェックボックスをフラットボタンのデザインにカスタマイズしたデザイン。
チェックボックスなので、複数選択できます。
ボタンをインライン要素に変更し、横並びにもできます。
HTML
縦並びのチェックボックスデザイン（ブロック）
<div class="u-mb-20">
<p>複数選択可能なチェックボックス</p>
<ul class="multicheck">
<li class="multicheck-item">
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="check1-0" class="multicheck-input" checked>
<label for="check1-0" class="multicheck-label">選択肢1</label>
</li>
<li class="multicheck-item">
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="check1-1" class="multicheck-input">
<label for="check1-1" class="multicheck-label">選択肢2</label>
</li>
<li class="multicheck-item">
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="check1-2" class="multicheck-input">
<label for="check1-2" class="multicheck-label">選択肢3</label>
</li>
<li class="multicheck-item">
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="check1-3" class="multicheck-input">
<label for="check1-3" class="multicheck-label">選択肢4</label>
</li>
<li class="multicheck-item">
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="check1-4" class="multicheck-input">
<label for="check1-4" class="multicheck-label">選択肢5</label>
</li>
</ul>
</div>
横並びのチェックボックスデザイン（インラインブロック）
<div class="u-mb-20">
<p>複数選択可能なチェックボックス</p>
<ul class="multicheck multicheck-inline">
<li class="multicheck-item">
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="check2-0" class="multicheck-input" checked>
<label for="check2-0" class="multicheck-label">選択肢1</label>
</li>
<li class="multicheck-item">
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="check2-1" class="multicheck-input">
<label for="check2-1" class="multicheck-label">選択肢2</label>
</li>
<li class="multicheck-item">
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="check2-2" class="multicheck-input">
<label for="check2-2" class="multicheck-label">選択肢3</label>
</li>
<li class="multicheck-item">
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="check2-3" class="multicheck-input">
<label for="check2-3" class="multicheck-label">選択肢4</label>
</li>
<li class="multicheck-item">
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="check2-4" class="multicheck-input">
<label for="check2-4" class="multicheck-label">選択肢5</label>
</li>
</ul>
</div>
CSS
.multicheck {
list-style: none;
margin: 0;
padding: 0; }
.multicheck .multicheck-item {
margin: 5px 0;
padding: 0; }
.multicheck input[type="checkbox"] {
display: none; }
.multicheck input[type="checkbox"].multicheck-input:checked + label {
background: #C0E8FF;
color: #333333;
border: 2px solid #28A7E1; }
.multicheck .multicheck-label {
display: block;
width: 100%;
height: 45px;
text-align: center;
line-height: 45px;
padding: 0 5px;
cursor: pointer;
color: #333333;
border: 2px solid rgba(0, 0, 0, 0);
border-radius: 5px;
background: #EEFECD;
transition: 0.5s; }
.multicheck .multicheck-label:hover {
background-color: #E2EDF9;
border: 2px solid #28A7E1; }
インラインブロックにする場合の追加クラス
.multicheck.multicheck-inline .multicheck-item {
display: inline-block; }
.multicheck.multicheck-inline .multicheck-label {
display: inline-block;
width: 100px; }
ラジオボタンをカスタマイズする
html5のinput要素のtype=”radio”をcssでフラットボタンのデザインに装飾します。
表示サンプル
ラジオボタンをフラットボタンのデザインにカスタマイズしたデザイン。
ラジオボタンなので、一つしか選択できません。
ボタンをインライン要素に変更し、横並びにもできます。
HTML
縦並びのラジオボタンデザイン（ブロック）
<div class="u-mb-20">
<p>縦並びのラジオボタン</p>
<ul class="selectradio">
<li class="selectradio-item">
<input type="radio" name="radiogroup1" id="select-1" value="1" checked="">
<label for="select-1" class="selectradio-label">選択肢1</label>
</li>
<li class="selectradio-item">
<input type="radio" name="radiogroup1" id="select-2" value="2">
<label for="select-2" class="selectradio-label">選択肢2</label>
</li>
<li class="selectradio-item">
<input type="radio" name="radiogroup1" id="select-3" value="3">
<label for="select-3" class="selectradio-label">選択肢3</label>
</li>
<li class="selectradio-item">
<input type="radio" name="radiogroup1" id="select-4" value="4">
<label for="select-4" class="selectradio-label">選択肢4</label>
</li>
<li class="selectradio-item">
<input type="radio" name="radiogroup1" id="select-5" value="5">
<label for="select-5" class="selectradio-label">選択肢5</label>
</li>
</ul>
</div>
横並びのラジオボタンデザイン（インラインブロック）
<div class="u-mb-20">
<p>縦並びのラジオボタン</p>
<ul class="selectradio selectradio-inline">
<li class="selectradio-item">
<input type="radio" name="radiogroup2" id="select2-1" value="1" checked="">
<label for="select2-1" class="selectradio-label">選択肢1</label>
</li>
<li class="selectradio-item">
<input type="radio" name="radiogroup2" id="select2-2" value="2">
<label for="select2-2" class="selectradio-label">選択肢2</label>
</li>
<li class="selectradio-item">
<input type="radio" name="radiogroup2" id="select2-3" value="3">
<label for="select2-3" class="selectradio-label">選択肢3</label>
</li>
<li class="selectradio-item">
<input type="radio" name="radiogroup2" id="select2-4" value="4">
<label for="select2-4" class="selectradio-label">選択肢4</label>
</li>
<li class="selectradio-item">
<input type="radio" name="radiogroup2" id="select2-5" value="5">
<label for="select2-5" class="selectradio-label">選択肢5</label>
</li>
</ul>
</div>
CSS
.selectradio {
list-style: none;
margin: 0;
padding: 0; }
.selectradio .selectradio-item {
margin: 5px 0;
padding: 0; }
.selectradio input[type="radio"] {
display: none; }
.selectradio input[type="radio"]:checked + label {
background: #C0E8FF;
color: #333333;
border: 2px solid #28A7E1; }
.selectradio .selectradio-label {
display: block;
width: 100%;
height: 45px;
text-align: center;
line-height: 45px;
padding: 0 5px;
cursor: pointer;
color: #333333;
border: 2px solid rgba(0, 0, 0, 0);
border-radius: 5px;
background: #EEFECD;
transition: 0.5s;
border-radius: 4px; }
インラインブロックにする場合の追加クラス
.selectradio.selectradio-inline .selectradio-item {
display: inline-block; }
.selectradio.selectradio-inline .selectradio-label {
display: inline-block;
width: 100px; }
