FORMチェックボックス-checkboxとラジオボタン-radioを、
好みの色や大きさにカスタマイズする - カラーとサイズのバリエーション

1. ボタン消去・生成および色付けCSS/HTML｜2. 大きさの変更CSS｜3. これまでのまとめ

FORM チェックボックス（checkbox）およびラジオ（radio）ボタンの色や大きさをCSSで変更する方法を紹介します。
checkboxおよびradioボタンのデフォルトの色および大きさは下表「標準の色・大きさ」に示すとおりです。
checkboxおよびradioのボタンの色は、デフォルトのままでは変更できません。
このため、CSSでデフォルトのボタンを消して、新たにボタン生成し、そのボタンに色を付けます。
checkbox（チェックボックス）およびradio（ラジオ）のデフォルトの色および大きさをカスタマイズしたサンプルは下表「色・大きさのバリエーション」に示します。
   参照・引用サイト：［CSS］派手な色で目立つチェックボックスとラジオボタン。
   参考サイト：ラジオボタンをおしゃれにするCSSスニペット16選。ポチッ！で感動をお届け。

チェックボックス-checkboxおよびラジオボタン-radioを、好みの色や大きさにカスタマイズする方法は以下のとおりです。

  1. チェックボックス-checkboxおよびラジオボタン-radioのボタン消去・生成および色付けCSS/HTML
  2. チェックボックス-checkboxおよびラジオボタン-radioの大きさの変更CSS
  3. これまでのまとめ

    1. ボタン消去・生成および色付けCSS/HTML

    HTML（LABELタグ未使用）

    <table style="margin-top:25px;border:1px solid #000;">
<caption>色・大きさのバリエーション<br>（チェックボックス - checkbox　ラジオボタン - radio）</caption>
        <tr bgcolor=beige>
          <th>色</th>
          <td>チェックボックス</td>
          <td>ラジオボタン</td>
        </tr>
          <th>緑系色 #32CD32</th>
          <td>
            <input class="green size1" type="checkbox" checked>  
            <input class="green size2" type="checkbox">    
            <input class="green size3" type="checkbox" style="">
          </td>
          <td>
            <input class="green size1"  type="radio" name="group1">  
            <input class="green size2"  type="radio" name="group1">    
            <input class="green size3"  type="radio" name="group1" checked>
          </td>
        </tr>
        <tr>
          <th>青系色 #1E90FF</th>
          <td>
            <input class="blue size1" type="checkbox">  
            <input class="blue size2" type="checkbox">    
            <input class="blue size3" type="checkbox" checked>
          </td>
          <td>
            <input class="blue size1" type="radio" name="group2">  
            <input class="blue size2" type="radio" name="group2" checked>    
            <input class="blue size3" type="radio" name="group2">
          </td>
        </tr>
        <tr>
          <th>赤系色 #FF3300</th>
          <td>
            <input class="red size1" type="checkbox"  checked>  
            <input class="red size2" type="checkbox">    
            <input class="red size3" type="checkbox">
          </td>
          <td>
            <input class="red size1" type="radio" name="group3">  
            <input class="red size2" type="radio" name="group3">    
            <input class="red size3" type="radio" name="group3" checked>
          </td>
        </tr>
        <tr>
          <th>黄系色 #FFA500</th>
          <td>
            <input class="orange size1" type="checkbox">  
            <input class="orange size2" type="checkbox" checked>    
            <input class="orange size3" type="checkbox">
          </td>
          <td>
            <input class="orange size1" type="radio" name="group4" checked>  
            <input class="orange size2" type="radio" name="group4">    
            <input class="orange size3" type="radio" name="group4">
          </td>
        </tr>
        <tr>
          <th>紫系色 #EE82EE</th>
          <td>
            <input class="violet size1" type="checkbox">  
            <input class="violet size2" type="checkbox">    
            <input class="violet size3" type="checkbox" checked>
          </td>
          <td>
            <input class="violet size1" type="radio" name="group5">  
            <input class="violet size2" type="radio" name="group5">    
            <input class="violet size3" type="radio" name="group5" checked>
          </td>
        </tr>
      </table>

    HTML（LABELタグ使用）

    <table style="margin-top:25px;border:1px solid #000;">
<caption>色・大きさのバリエーション（チェックボックス - checkbox　ラジオボタン - radio）LABELタグ使用</caption>
        <tr>
        <td colspan=3 style="text-align:left;font-weight:bold">▽ INPUTとLABELを並べ、LABELタグにfor属性使用の場合、ラベルクリックでボタン制御できる</td>
        </tr>
        <tr>
          <th>緑系色 #32CD32</th>
          <td>
            <input id="g1c" class="green size1" type="checkbox" checked><label for="g1c">緑系１</label>  
            <input id="g2c"  class="green size2" type="checkbox"><label for="g2c">緑系２</label>    
            <input id="g3c"  class="green size3" type="checkbox" style="g3c"><label for="g3c"> 緑系３</label>
          </td>
          <td>
            <input id="g1r" class="green size1"  type="radio" name="group1"><label for="g1r">緑系１</label>  
            <input id="g2r" class="green size2"  type="radio" name="group1"><label for="g2r">緑系２</label>    
            <input id="g3r" class="green size3"  type="radio" name="group1" checked><label for="g3r"> 緑系３</label>
          </td>
        </tr>
        <tr>
        <td colspan=3 style="text-align:left;font-weight:bold">▽ INPUTとLABELを並べ、LABELタグにfor属性未使用の場合、ラベルクリックでボタン制御できない</td>
        </tr>
        <tr>
          <th>赤系色 #FF3300</th>
          <td>
            <input class="red size1" type="checkbox"  checked><label>赤系１</label>   
            <input class="red size2" type="checkbox"><label>赤系２</label>    
            <input class="red size3" type="checkbox"><label> 赤系３</label>
          </td>
          <td>
            <input class="red size1" type="radio" name="group3"><label>赤系１</label>  
            <input class="red size2" type="radio" name="group3"><label>赤系２</label>    
            <input class="red size3" type="radio" name="group3" checked><label> 赤系３</label>
          </td>
        </tr>
        <tr>
        <td colspan=3 style="text-align:left;font-weight:bold">▽ INPUTをLABELで囲んだ場合、LABELタグのfor属性は不用、、ラベルクリックでボタン制御できる</td>
        </tr>
        <tr>
          <th>青系色 #1E90FF</th>
          <td>
            <label><input class="blue size1" type="checkbox">青系１</label>  
            <label><input class="blue size2" type="checkbox">青系２</label>    
            <label><input class="blue size3" type="checkbox" checked> 青系３</label>
          </td>
          <td>
            <label><input class="blue size1" type="radio" name="group2">青系１</label>  
            <label><input class="blue size2" type="radio" name="group2" checked>青系２</label>    
            <label><input class="blue size3" type="radio" name="group2"> 青系３</label>
          </td>
        </tr>
</table>

    CSS（ボタン消去・生成および色付け／LABELタグ未使用）

      新たに生成されるcheckboxおよびradioボタンの大きさは、20x20 px です。

    /* checkbox radio 共通 */
    input[type=checkbox],input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;      /* 生成ボタンサイズ */
    width: 20px;       /* 生成ボタンサイズ */
    vertical-align: -0.8rem;
    transition:all .15s ease-out 0s;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: .4rem;
    outline: none;
    border-radius: 10%;
}

/* Checkbox */
input[type=checkbox]:before,input[type=checkbox]:after {
    position: absolute;
    content: "";
    background: #fff;
    transition: all .2s ease-in-out;
}
input[type=checkbox]:before {
    left: 2px;
    top: 6px;
    width: 0;
    height: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
input[type=checkbox]:after {
    right: 9px;
    bottom: 3px;
    width: 2px;
    height: 0;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transition-delay: .2s;
}
input[type=checkbox]:checked:before {
    left: 1px;
    top: 10px;
    width: 6px;
    height: 2px;
}
input[type=checkbox]:checked:after {
    right: 5px;
    bottom: 1px;
    width: 2px;
    height: 14px;
}
input[type=checkbox]:indeterminate:before,input[type=checkbox]:indeterminate:after {
    width: 7px;
    height: 2px;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}
input[type=checkbox]:indeterminate:before {
    left: 1px;
    top: 7px;
}
input[type=checkbox]:indeterminate:after {
    right: 1px;
    bottom: 7px;
}

/* Radio */
input[type=radio] {
    border-radius: 50%;
}
input[type=radio]:checked:before {
    transform: scale(1);
}
input[type=radio]:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 3px;
    transform: scale(0);
    transition: all ease-out 250ms;
}

/* Colors */
input[type=checkbox],input[type=radio] {
    border: 2px solid #4caf50;
}

input[type=checkbox]:checked,input[type=checkbox]:indeterminate,input[type=radio]:checked:before {
    background: #4caf50;
}

/* Complement colors */

/* green */
input[type=checkbox].green,input[type=radio].green {
    border: 2px solid #32CD32;
}
input[type=checkbox].green:checked,input[type=checkbox].green:indeterminate,input[type=radio].green:checked:before {
    background: #32CD32;
}

/* blue */
input[type=checkbox].blue,input[type=radio].blue {
    border: 2px solid #1E90FF;
}
input[type=checkbox].blue:checked,input[type=checkbox].blue:indeterminate,input[type=radio].blue:checked:before {
    background: #1E90FF;
}

/* red */
input[type=checkbox].red,input[type=radio].red {
    border: 2px solid #FF3300;
}
input[type=checkbox].red:checked,input[type=checkbox].red:indeterminate,input[type=radio].red:checked:before {
    background: #FF3300;
}

/* orange */
input[type=checkbox].orange,input[type=radio].orange {
    border: 2px solid #FFA500;
}
input[type=checkbox].orange:checked,input[type=checkbox].orange:indeterminate,input[type=radio].orange:checked:before {
    background: #FFA500;
}

/* violet */
input[type=checkbox].violet,input[type=radio].violet {
    border: 2px solid #EE82EE;
}
input[type=checkbox].violet:checked,input[type=checkbox].violet:indeterminate,input[type=radio].violet:checked:before {
    background: #EE82EE;
}

    CSS（ボタン消去・生成および色付け／LABELタグ使用）

      新たに生成されるcheckboxおよびradioボタンの大きさは、20x20 px です。

    /* checkbox radio共通 ボタン消去・生成、色付け  */
    input[type=checkbox],input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    vertical-align: -0.8rem;
    transition:all .15s ease-out 0s;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: .4rem;
    outline: none;
    border-radius: 10%;
}
/* Checkbox */
input[type=checkbox]:before,input[type=checkbox]:after {
    position: absolute;
    content: "";
    background: #fff;
    transition: all .2s ease-in-out;
}
input[type=checkbox]:before {
    left: 2px;
    top: 6px;
    width: 0;
    height: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
input[type=checkbox]:after {
    right: 9px;
    bottom: 3px;
    width: 2px;
    height: 0;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transition-delay: .2s;
}
input[type=checkbox]:checked:before {
    left: 1px;
    top: 10px;
    width: 6px;
    height: 2px;
}
input[type=checkbox]:checked:after {
    right: 5px;
    bottom: 1px;
    width: 2px;
    height: 14px;
}
input[type=checkbox]:indeterminate:before,input[type=checkbox]:indeterminate:after {
    width: 7px;
    height: 2px;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}
input[type=checkbox]:indeterminate:before {
    left: 1px;
    top: 7px;
}
input[type=checkbox]:indeterminate:after {
    right: 1px;
    bottom: 7px;
}
/* Radio */
input[type=radio] {
    border-radius: 50%;
}
input[type=radio]:checked:before {
    transform: scale(1);
}
input[type=radio]:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 3px;
    transform: scale(0);
    transition: all ease-out 250ms;
}
/* Colors */
input[type=checkbox],input[type=radio] {
    border: 2px solid #4caf50;
}
input[type=checkbox]:checked,input[type=checkbox]:indeterminate,input[type=radio]:checked:before {
    background: #4caf50;
}
/* Complement colors */
/* green */
input[type=checkbox].green,input[type=radio].green {
    border: 2px solid #32CD32;
}
input[type=checkbox].green:checked,input[type=checkbox].green:indeterminate,input[type=radio].green:checked:before {
    background: #32CD32;
}
/* blue */
input[type=checkbox].blue,input[type=radio].blue {
    border: 2px solid #1E90FF;
}
input[type=checkbox].blue:checked,input[type=checkbox].blue:indeterminate,input[type=radio].blue:checked:before {
    background: #1E90FF;
}
/* red */
input[type=checkbox].red,input[type=radio].red {
    border: 2px solid #FF3300;
}
input[type=checkbox].red:checked,input[type=checkbox].red:indeterminate,input[type=radio].red:checked:before {
    background: #FF3300;
}
/* orange */
input[type=checkbox].orange,input[type=radio].orange {
    border: 2px solid #FFA500;
}
input[type=checkbox].orange:checked,input[type=checkbox].orange:indeterminate,input[type=radio].orange:checked:before {
    background: #FFA500;
}
/* violet */
input[type=checkbox].violet,input[type=radio].violet {
    border: 2px solid #EE82EE;
}
input[type=checkbox].violet:checked,input[type=checkbox].violet:indeterminate,input[type=radio].violet:checked:before {
    background: #EE82EE;
}

/* チェックボックス - checkbox　ラジオボタン - radio サイズ */
.size1{
 transform:scale(0.75);
 }
.size2{
 transform:scale(1.0);
 }
.size3{
 transform:scale(1.5);
 }

/* table用 */
table {
  width: 800px;
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
}
table th,table td {
  padding:17px;
  border:1px solid #aaa; 
}

    2. ボタンの大きさの変更CSS

    引用参照したCSSのボタンの大きさのデフォルト値は、20x20 pxです。
    このサンプルの大きさはつぎのように設定しています。関連HTMLは、上記1.項のHTMLを参照。

    CSS（ボタンの大きさの変更）

    /* チェックボックス - checkbox　ラジオボタン - radio サイズ */
.size1{
 transform:scale(0.75);
 }
.size2{
 transform:scale(1.0);
 }
.size3{
 transform:scale(1.5);
 }

    3. これまでのまとめ

    これまでのCSSおよびHTMLをまとめ、そのHTML全体およびデモを下に示します。
    HTMLその１は、LABELタグを使用していません。HTMLその２は、LABELタグを使用しています。
    INPUT type="radio" またはtype="checkbox"タグは、LABELタグと併用すると、ラベル文字のクリックによるボタンの制御が可能になります。 

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset ="utf-8">
<title>チェックボックス-checkboxとラジオボタン-radioを、好みの色や大きさをカスタマイズする デモ</title>

<style>
/* checkbox radio共通 ボタン消去・生成、色付け  */
    input[type=checkbox],input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    vertical-align: -0.8rem;
    transition:all .15s ease-out 0s;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: .4rem;
    outline: none;
    border-radius: 10%;
}
/* Checkbox */
input[type=checkbox]:before,input[type=checkbox]:after {
    position: absolute;
    content: "";
    background: #fff;
    transition: all .2s ease-in-out;
}
input[type=checkbox]:before {
    left: 2px;
    top: 6px;
    width: 0;
    height: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
input[type=checkbox]:after {
    right: 9px;
    bottom: 3px;
    width: 2px;
    height: 0;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transition-delay: .2s;
}
input[type=checkbox]:checked:before {
    left: 1px;
    top: 10px;
    width: 6px;
    height: 2px;
}
input[type=checkbox]:checked:after {
    right: 5px;
    bottom: 1px;
    width: 2px;
    height: 14px;
}
input[type=checkbox]:indeterminate:before,input[type=checkbox]:indeterminate:after {
    width: 7px;
    height: 2px;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}
input[type=checkbox]:indeterminate:before {
    left: 1px;
    top: 7px;
}
input[type=checkbox]:indeterminate:after {
    right: 1px;
    bottom: 7px;
}
/* Radio */
input[type=radio] {
    border-radius: 50%;
}
input[type=radio]:checked:before {
    transform: scale(1);
}
input[type=radio]:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 3px;
    transform: scale(0);
    transition: all ease-out 250ms;
}
/* Colors */
input[type=checkbox],input[type=radio] {
    border: 2px solid #4caf50;
}
input[type=checkbox]:checked,input[type=checkbox]:indeterminate,input[type=radio]:checked:before {
    background: #4caf50;
}
/* Complement colors */
/* green */
input[type=checkbox].green,input[type=radio].green {
    border: 2px solid #32CD32;
}
input[type=checkbox].green:checked,input[type=checkbox].green:indeterminate,input[type=radio].green:checked:before {
    background: #32CD32;
}
/* blue */
input[type=checkbox].blue,input[type=radio].blue {
    border: 2px solid #1E90FF;
}
input[type=checkbox].blue:checked,input[type=checkbox].blue:indeterminate,input[type=radio].blue:checked:before {
    background: #1E90FF;
}
/* red */
input[type=checkbox].red,input[type=radio].red {
    border: 2px solid #FF3300;
}
input[type=checkbox].red:checked,input[type=checkbox].red:indeterminate,input[type=radio].red:checked:before {
    background: #FF3300;
}
/* orange */
input[type=checkbox].orange,input[type=radio].orange {
    border: 2px solid #FFA500;
}
input[type=checkbox].orange:checked,input[type=checkbox].orange:indeterminate,input[type=radio].orange:checked:before {
    background: #FFA500;
}
/* violet */
input[type=checkbox].violet,input[type=radio].violet {
    border: 2px solid #EE82EE;
}
input[type=checkbox].violet:checked,input[type=checkbox].violet:indeterminate,input[type=radio].violet:checked:before {
    background: #EE82EE;
}
</style>

<style>
/* チェックボックス - checkbox　ラジオボタン - radio サイズ */
.size1{
 transform:scale(0.75);
 }
.size2{
 transform:scale(1.0);
 }
.size3{
 transform:scale(1.5);
 }
</style>

<!-- table用-->
<style>
table {
  width: 600px;
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
}
table th,table td {
  padding:17px;
  border:1px solid #aaa; 
}
</style>

</head>
<body>
<h2 style="text-align:center">チェックボックス-checkboxとラジオボタン-radioを、好みの色や大きさをカスタマイズする デモ</h2>
<table style="margin-top:25px;border:1px solid #000;">
<caption>色・大きさのバリエーション<br>（チェックボックス - checkbox　ラジオボタン - radio）</caption>
        <tr bgcolor=beige>
          <th>色</th>
          <td>チェックボックス</td>
          <td>ラジオボタン</td>
        </tr>
          <th>緑系色 #32CD32</th>
          <td>
            <input class="green size1" type="checkbox" checked>  
            <input class="green size2" type="checkbox">    
            <input class="green size3" type="checkbox" style="">
          </td>
          <td>
            <input class="green size1"  type="radio" name="group1">  
            <input class="green size2"  type="radio" name="group1">    
            <input class="green size3"  type="radio" name="group1" checked>
          </td>
        </tr>
        <tr>
          <th>青系色 #1E90FF</th>
          <td>
            <input class="blue size1" type="checkbox">  
            <input class="blue size2" type="checkbox">    
            <input class="blue size3" type="checkbox" checked>
          </td>
          <td>
            <input class="blue size1" type="radio" name="group2">  
            <input class="blue size2" type="radio" name="group2" checked>    
            <input class="blue size3" type="radio" name="group2">
          </td>
        </tr>
        <tr>
          <th>赤系色 #FF3300</th>
          <td>
            <input class="red size1" type="checkbox"  checked>  
            <input class="red size2" type="checkbox">    
            <input class="red size3" type="checkbox">
          </td>
          <td>
            <input class="red size1" type="radio" name="group3">  
            <input class="red size2" type="radio" name="group3">    
            <input class="red size3" type="radio" name="group3" checked>
          </td>
        </tr>
        <tr>
          <th>黄系色 #FFA500</th>
          <td>
            <input class="orange size1" type="checkbox">  
            <input class="orange size2" type="checkbox" checked>    
            <input class="orange size3" type="checkbox">
          </td>
          <td>
            <input class="orange size1" type="radio" name="group4" checked>  
            <input class="orange size2" type="radio" name="group4">    
            <input class="orange size3" type="radio" name="group4">
          </td>
        </tr>
        <tr>
          <th>紫系色 #EE82EE</th>
          <td>
            <input class="violet size1" type="checkbox">  
            <input class="violet size2" type="checkbox">    
            <input class="violet size3" type="checkbox" checked>
          </td>
          <td>
            <input class="violet size1" type="radio" name="group5">  
            <input class="violet size2" type="radio" name="group5">    
            <input class="violet size3" type="radio" name="group5" checked>
          </td>
        </tr>
      </table>
<br>
<hr>
urbanqee.com 2021. 5. 4
</body>
</html>
    <!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>チェックボックス-checkboxとラジオボタン-radioを、好みの色や大きさをカスタマイズする デモ ～ LABELタグ使用例 ～</title>

<style>
/* checkbox radio共通 ボタン消去・生成、色付け  */
    input[type=checkbox],input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    vertical-align: -0.8rem;
    transition:all .15s ease-out 0s;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: .4rem;
    outline: none;
    border-radius: 10%;
}
/* Checkbox */
input[type=checkbox]:before,input[type=checkbox]:after {
    position: absolute;
    content: "";
    background: #fff;
    transition: all .2s ease-in-out;
}
input[type=checkbox]:before {
    left: 2px;
    top: 6px;
    width: 0;
    height: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
input[type=checkbox]:after {
    right: 9px;
    bottom: 3px;
    width: 2px;
    height: 0;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transition-delay: .2s;
}
input[type=checkbox]:checked:before {
    left: 1px;
    top: 10px;
    width: 6px;
    height: 2px;
}
input[type=checkbox]:checked:after {
    right: 5px;
    bottom: 1px;
    width: 2px;
    height: 14px;
}
input[type=checkbox]:indeterminate:before,input[type=checkbox]:indeterminate:after {
    width: 7px;
    height: 2px;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}
input[type=checkbox]:indeterminate:before {
    left: 1px;
    top: 7px;
}
input[type=checkbox]:indeterminate:after {
    right: 1px;
    bottom: 7px;
}
/* Radio */
input[type=radio] {
    border-radius: 50%;
}
input[type=radio]:checked:before {
    transform: scale(1);
}
input[type=radio]:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 3px;
    transform: scale(0);
    transition: all ease-out 250ms;
}
/* Colors */
input[type=checkbox],input[type=radio] {
    border: 2px solid #4caf50;
}
input[type=checkbox]:checked,input[type=checkbox]:indeterminate,input[type=radio]:checked:before {
    background: #4caf50;
}
/* Complement colors */
/* green */
input[type=checkbox].green,input[type=radio].green {
    border: 2px solid #32CD32;
}
input[type=checkbox].green:checked,input[type=checkbox].green:indeterminate,input[type=radio].green:checked:before {
    background: #32CD32;
}
/* blue */
input[type=checkbox].blue,input[type=radio].blue {
    border: 2px solid #1E90FF;
}
input[type=checkbox].blue:checked,input[type=checkbox].blue:indeterminate,input[type=radio].blue:checked:before {
    background: #1E90FF;
}
/* red */
input[type=checkbox].red,input[type=radio].red {
    border: 2px solid #FF3300;
}
input[type=checkbox].red:checked,input[type=checkbox].red:indeterminate,input[type=radio].red:checked:before {
    background: #FF3300;
}
/* orange */
input[type=checkbox].orange,input[type=radio].orange {
    border: 2px solid #FFA500;
}
input[type=checkbox].orange:checked,input[type=checkbox].orange:indeterminate,input[type=radio].orange:checked:before {
    background: #FFA500;
}
/* violet */
input[type=checkbox].violet,input[type=radio].violet {
    border: 2px solid #EE82EE;
}
input[type=checkbox].violet:checked,input[type=checkbox].violet:indeterminate,input[type=radio].violet:checked:before {
    background: #EE82EE;
}
</style>

<style>
/* チェックボックス - checkbox　ラジオボタン - radio サイズ */
.size1{
 transform:scale(0.75);
 }
.size2{
 transform:scale(1.0);
 }
.size3{
 transform:scale(1.5);
 }
</style>

<!-- table用-->
<style>
table {
  width: 800px;
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
}
table th,table td {
  padding:17px;
  border:1px solid #aaa; 
}
</style>

</head>
<body>
<h2 style="text-align:center">チェックボックス-checkboxとラジオボタン-radioを、好みの色や大きさをカスタマイズする デモ
<br>～ LABELタグ使用 - ラベルクリックでボタン制御 ～</h2>
<table style="margin-top:25px;border:1px solid #000;">
<caption>色・大きさのバリエーション（チェックボックス - checkbox　ラジオボタン - radio）LABELタグ使用</caption>
        <tr>
        <td colspan=3 style="text-align:left;font-weight:bold">▽ INPUTとLABELを並べ、LABELタグにfor属性使用の場合、ラベルクリックでボタン制御できる</td>
        </tr>
        <tr>
          <th>緑系色 #32CD32</th>
          <td>
            <input id="g1c" class="green size1" type="checkbox" checked><label for="g1c">緑系１</label>  
            <input id="g2c"  class="green size2" type="checkbox"><label for="g2c">緑系２</label>    
            <input id="g3c"  class="green size3" type="checkbox" style="g3c"><label for="g3c"> 緑系３</label>
          </td>
          <td>
            <input id="g1r" class="green size1"  type="radio" name="group1"><label for="g1r">緑系１</label>  
            <input id="g2r" class="green size2"  type="radio" name="group1"><label for="g2r">緑系２</label>    
            <input id="g3r" class="green size3"  type="radio" name="group1" checked><label for="g3r"> 緑系３</label>
          </td>
        </tr>
        <tr>
        <td colspan=3 style="text-align:left;font-weight:bold">▽ INPUTとLABELを並べ、LABELタグにfor属性未使用の場合、ラベルクリックでボタン制御できない</td>
        </tr>
        <tr>
          <th>赤系色 #FF3300</th>
          <td>
            <input class="red size1" type="checkbox"  checked><label>赤系１</label>   
            <input class="red size2" type="checkbox"><label>赤系２</label>    
            <input class="red size3" type="checkbox"><label> 赤系３</label>
          </td>
          <td>
            <input class="red size1" type="radio" name="group3"><label>赤系１</label>  
            <input class="red size2" type="radio" name="group3"><label>赤系２</label>    
            <input class="red size3" type="radio" name="group3" checked><label> 赤系３</label>
          </td>
        </tr>
        <tr>
        <td colspan=3 style="text-align:left;font-weight:bold">▽ INPUTをLABELで囲んだ場合、LABELタグのfor属性は不用、、ラベルクリックでボタン制御できる</td>
        </tr>
        <tr>
          <th>青系色 #1E90FF</th>
          <td>
            <label><input class="blue size1" type="checkbox">青系１</label>  
            <label><input class="blue size2" type="checkbox">青系２</label>    
            <label><input class="blue size3" type="checkbox" checked> 青系３</label>
          </td>
          <td>
            <label><input class="blue size1" type="radio" name="group2">青系１</label>  
            <label><input class="blue size2" type="radio" name="group2" checked>青系２</label>    
            <label><input class="blue size3" type="radio" name="group2"> 青系３</label>
          </td>
        </tr>
      </table>
<br>
<hr>
urbanqee.com 2021. 5. 4
</body>
</html>

    1. ボタン消去・生成および色付けCSS/HTML｜2. 大きさの変更CSS｜3. これまでのまとめ｜TOP

    サイト内関連リンク：




     最終更新日：2021. 5. 15（初版）