
Sponsored Link
ラジオボタンとチェックボックスをカスタマイズする
<div class="sample">
<div>
<input type="radio" name="radio-sample" id="radio1"><label for="radio1">ラジオボタン1</label>
<input type="radio" name="radio-sample" id="radio2"><label for="radio2">ラジオボタン2</label>
</div>
<div>
<input type="checkbox" name="check-sample" id="check1"><label for="check1">チェックボックス1</label>
<input type="checkbox" name="check-sample" id="check2"><label for="check2">チェックボックス2</label>
</div>
</div>
.sample {
/* inputを包むボックスの調整(0から調整するといい) */
padding: 6px;
}
/* CSS3が対応してない場合は適応される(デフォルトのボタン) */
.sample input[type=radio],
.sample input[type=checkbox] {
display: inline-block;
margin-right: 6px;
}
/* 隣接しているlabel要素に対して適応される */
.sample input[type=radio] + label,
.sample input[type=checkbox] + label {
/* labelにポジションをあわせる */
position: relative;
display: inline-block;
/* 0から調整するといいかも */
margin-right: 12px;
/* label内の文字の大きさ */
font-size: 14px;
line-height: 30px;
cursor: pointer;
}
/* CSS3に対応していないブラウザには適応されない(通常のボタンが表示される) */
@media (min-width: 1px) {
/* デフォルトのボタンを無くす */
.sample input[type=radio],
.sample input[type=checkbox] {
display: none;
margin: 0;
}
/* カスタマイズしているボタン位置をabsoluteしている為、
ボタンと文字列が被るので、文字列の位置を調整する */
.sample input[type=radio] + label,
.sample input[type=checkbox] + label {
padding: 0 0 0 24px;
}
/* ラジオボタンとチェックボックスの共通の位置と形状を設定 */
.sample input[type=radio] + label::before,
.sample input[type=checkbox] + label::before {
content: "";
/* labelを基準値に絶対位置を指定する */
position: absolute;
/* 高さを真ん中にあわせる */
top: 50%;
/* 左詰めにする */
left: 0;
margin-top: -9px;
/* ボタンの形状を指定する */
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 18px;
height: 18px;
background: #FFF;
}
/* ラジオボタンの形状 */
.sample input[type=radio] + label::before {
border: 2px solid #000;
border-radius: 30px;
}
/* チェックボックスの形状 */
.sample input[type=checkbox] + label::before {
border: 2px solid #ccc;
}
/* チェック時の位置を設定する */
.sample input[type=radio]:checked + label::after,
.sample input[type=checkbox]:checked + label::after {
content: "";
position: absolute;
top: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
}
/* ラジオボタンのチェック時の位置と形状を設定する */
.sample input[type=radio]:checked + label::after {
left: 5px;
width: 8px;
height: 8px;
margin-top: -4px;
background: #E71063;
border-radius: 8px;
}
/* チェックボックスのチェック時の位置と形状を設定する */
.sample input[type=checkbox]:checked + label::after {
/* チェックの位置 */
left: 3px;
margin-top: -8px;
/* チェックの大きさ */
width: 16px;
height: 8px;
/* 形状 */
/* heightの部分 */
border-left: 3px solid #E71063;
/* widthの部分 */
border-bottom: 3px solid #E71063;
/* 回転(角度をつける) */
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.sample {
/* inputを包むボックスの調整(0から調整するといい) */
padding: 6px;
input[type=radio],input[type=checkbox] {
display: inline-block;
margin-right: 6px;
}
input[type=radio] + label,input[type=checkbox] + label {
position: relative;
display: inline-block;
margin-right: 12px;
font-size: 14px;
line-height: 30px;
cursor: pointer;
}
}
@media (min-width: 1px) {
.sample{
input[type=radio],input[type=checkbox] {
display: none;
margin: 0;
}
input[type=radio] + label,input[type=checkbox] + label {
padding: 0 0 0 24px;
}
input[type=radio] + label::before,input[type=checkbox] + label::before {
content: "";
position: absolute;
top: 50%;
left: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 18px;
height: 18px;
margin-top: -9px;
background: #FFF;
}
input[type=radio] + label::before {
border: 2px solid #ccc;
border-radius: 30px;
}
input[type=checkbox] + label::before {
border: 2px solid #ccc;
}
input[type=radio]:checked + label::after,input[type=checkbox]:checked + label::after {
content: "";
position: absolute;
top: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
}
input[type=radio]:checked + label::after {
left: 5px;
width: 8px;
height: 8px;
margin-top: -4px;
background: #E71063;
border-radius: 8px;
}
input[type=checkbox]:checked + label::after {
left: 3px;
width: 16px;
height: 8px;
margin-top: -8px;
border-left: 3px solid #E71063;
border-bottom: 3px solid #E71063;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
}
※もし、画像で対応するならこっち
@mixin custom-input($size, $type) {
// 見た目は画像を表示するので、input要素は非表示にする
display: none;
// 隣接セレクタを使い、inputの次にあるlabelに見た目を設定する
+ label {
position: relative;
display: inline-block;
// 【任意】カスタマイズした要素と文字間隔を空ける。
padding-left: $size + 5px;
min-height: $size;
line-height: $size;
cursor: pointer;
&::before {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: $size;
height: $size;
// contentに表示したい画像を指定
content: url("#{$type}_off.png");
}
}
// :checkedの擬似クラスでinput要素のチェック状態を取得。labelは接続セレクタを使い、チェック状態用の画像を指定する
&:checked + label::before {
content: url("#{$type}_on.png");
}
// 【任意】input要素をdisabledにする事がある場合は、disabled用のスタイルを指定
&:disabled + label {
opacity: .3;
cursor: not-allowed;
}
}
// チェックボックスのカスタマイズ
// 第1引数に画像サイズ、第2引数に画像名を指定
.custom-checkbox {
@include custom-input(20px, checkbox);
}
// ラジオボタンのカスタマイズ
.custom-radio {
@include custom-input(18px, radio);
}
// チェックボックスのカスタマイズ
.custom-checkbox {
display: none;
}
.custom-checkbox + label {
position: relative;
display: inline-block;
margin-right: 5px;
padding-left: 25px;
min-height: 20px;
line-height: 20px;
cursor: pointer;
}
.custom-checkbox + label::before {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 20px;
height: 20px;
content: url("checkbox_off.png");
}
.custom-checkbox:checked + label::before {
content: url("checkbox_on.png");
}
.custom-checkbox:disabled + label {
opacity: .3;
cursor: not-allowed;
}
// ラジオボタンのカスタマイズ
.custom-radio {
display: none;
}
.custom-radio + label {
position: relative;
display: inline-block;
margin-right: 5px;
padding-left: 23px;
min-height: 18px;
line-height: 18px;
cursor: pointer;
}
.custom-radio + label::before {
position: absolute;
display: inline-block;
left: 0;
top: 0;
width: 18px;
height: 18px;
content: url("radio_off.png");
}
.custom-radio:checked + label::before {
content: url("radio_on.png");
}
.custom-radio:disabled + label {
opacity: .3;
cursor: not-allowed;
}