トップへ(mam-mam.net/)

コピペで使えるCSSでオリジナルのチェックボックスを作成する

検索：

コピペで使えるCSSでオリジナルのチェックボックスを作成する

正方形のへこんだチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox1" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox1{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.0em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3) inset;
  }
  input[type="checkbox"].mam-checkbox1:checked{
    background:#EEE;/*チェックオンの背景色*/
  }
  input[type="checkbox"].mam-checkbox1:checked::before{
    content:"";
    position:absolute;
    width:0.4em;
    height:0.2em;
    border-radius:0.1em;
    left:0.1em;
    top:0.6em;
    background:#333;
    transform-origin:0.3em 0.1em 0;
    transform:rotate(45deg);
  }
  input[type="checkbox"].mam-checkbox1:checked::after{
    content:"";
    position:absolute;
    width:0.7em;
    height:0.2em;
    border-radius:0.1em;
    left:0.3em;
    top:0.6em;
    background:#333;
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
    transform-origin:0.1em 0.1em 0;
    transform:rotate(-45deg);
  }
</style>

正方形のへこんだ四角のチェックのチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox2" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox2{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.0em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3) inset;
  }
  input[type="checkbox"].mam-checkbox2:checked{
    background:#EEE;/*チェックオンの背景色*/
  }
  input[type="checkbox"].mam-checkbox2:checked::before{
    content:"";
    position:absolute;
    width:0.6em;
    height:0.6em;
    border-radius:0.0em;
    left:0.2em;
    top:0.2em;
    background:#333;
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
  }
</style>

円形のへこんだチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox3" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox3{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.5em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3) inset;
  }
  input[type="checkbox"].mam-checkbox3:checked{
    background:#EEE;/*チェックオンの背景色*/
  }
  input[type="checkbox"].mam-checkbox3:checked::before{
    content:"";
    position:absolute;
    width:0.4em;
    height:0.2em;
    border-radius:0.1em;
    left:0.1em;
    top:0.6em;
    background:#333;
    transform-origin:0.3em 0.1em 0;
    transform:rotate(45deg);
  }
  input[type="checkbox"].mam-checkbox3:checked::after{
    content:"";
    position:absolute;
    width:0.7em;
    height:0.2em;
    border-radius:0.1em;
    left:0.3em;
    top:0.6em;
    background:#333;
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
    transform-origin:0.1em 0.1em 0;
    transform:rotate(-45deg);
  }
</style>

円形のへこんだ丸のチェックのチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox4" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox4{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.5em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3) inset;
  }
  input[type="checkbox"].mam-checkbox4:checked{
    background:#EEE;/*チェックオンの背景色*/
  }
  input[type="checkbox"].mam-checkbox4:checked::before{
    content:"";
    position:absolute;
    width:0.6em;
    height:0.6em;
    border-radius:0.3em;
    left:0.2em;
    top:0.2em;
    background:#333;
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
  }
</style>

正方形のへこんだ白黒チェックのチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox5" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox5{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.0em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3) inset;
  }
  input[type="checkbox"].mam-checkbox5:checked{
    background:#EEE;/*チェックオンの背景色*/
  }
  input[type="checkbox"].mam-checkbox5::before{
    content:"";
    position:absolute;
    width:0.4em;
    height:0.2em;
    border-radius:0.1em;
    left:0.1em;
    top:0.6em;
    background:#FFF;/*チェックの色*/
    transform-origin:0.3em 0.1em 0;
    transform:rotate(45deg);
  }
  input[type="checkbox"].mam-checkbox5:checked::before{
    background:#333;/*チェックの色*/
  }
  input[type="checkbox"].mam-checkbox5::after{
    content:"";
    position:absolute;
    width:0.7em;
    height:0.2em;
    border-radius:0.1em;
    left:0.3em;
    top:0.6em;
    background:#FFF;/*チェックの色*/
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
    transform-origin:0.1em 0.1em 0;
    transform:rotate(-45deg);
  }
  input[type="checkbox"].mam-checkbox5:checked::after{
    background:#333;/*チェックの色*/
  }
</style>

円形のへこんだ白黒チェックのチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox6" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox6{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.5em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3) inset;
  }
  input[type="checkbox"].mam-checkbox6:checked{
    background:#EEE;/*チェックオンの背景色*/
  }
  input[type="checkbox"].mam-checkbox6::before{
    content:"";
    position:absolute;
    width:0.4em;
    height:0.2em;
    border-radius:0.1em;
    left:0.1em;
    top:0.6em;
    background:#FFF;/*チェックの色*/
    transform-origin:0.3em 0.1em 0;
    transform:rotate(45deg);
  }
  input[type="checkbox"].mam-checkbox6:checked::before{
    background:#333;/*チェックの色*/
  }
  input[type="checkbox"].mam-checkbox6::after{
    content:"";
    position:absolute;
    width:0.7em;
    height:0.2em;
    border-radius:0.1em;
    left:0.3em;
    top:0.6em;
    background:#FFF;/*チェックの色*/
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
    transform-origin:0.1em 0.1em 0;
    transform:rotate(-45deg);
  }
  input[type="checkbox"].mam-checkbox6:checked::after{
    background:#333;/*チェックの色*/
  }
</style>

正方形の張り出したチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox7" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox7{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.0em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.4);
  }
  input[type="checkbox"].mam-checkbox7:checked{
    background:#DDD;/*チェックオンの背景色*/
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3) inset;
  }
  input[type="checkbox"].mam-checkbox7:checked::before{
    content:"";
    position:absolute;
    width:0.4em;
    height:0.2em;
    border-radius:0.1em;
    left:0.1em;
    top:0.6em;
    background:#333;
    transform-origin:0.3em 0.1em 0;
    transform:rotate(45deg);
  }
  input[type="checkbox"].mam-checkbox7:checked::after{
    content:"";
    position:absolute;
    width:0.7em;
    height:0.2em;
    border-radius:0.1em;
    left:0.3em;
    top:0.6em;
    background:#333;
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
    transform-origin:0.1em 0.1em 0;
    transform:rotate(-45deg);
  }
</style>

円形の張り出したチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox8" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox8{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.5em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.4);
  }
  input[type="checkbox"].mam-checkbox8:checked{
    background:#DDD;/*チェックオンの背景色*/
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3) inset;
  }
  input[type="checkbox"].mam-checkbox8:checked::before{
    content:"";
    position:absolute;
    width:0.4em;
    height:0.2em;
    border-radius:0.1em;
    left:0.1em;
    top:0.6em;
    background:#333;
    transform-origin:0.3em 0.1em 0;
    transform:rotate(45deg);
  }
  input[type="checkbox"].mam-checkbox8:checked::after{
    content:"";
    position:absolute;
    width:0.7em;
    height:0.2em;
    border-radius:0.1em;
    left:0.3em;
    top:0.6em;
    background:#333;
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
    transform-origin:0.1em 0.1em 0;
    transform:rotate(-45deg);
  }
</style>

正方形の張り出した白黒チェックのチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox9" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox9{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.0em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
  }
  input[type="checkbox"].mam-checkbox9:checked{
    background:#DDD;/*チェックオンの背景色*/
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3) inset;
  }
  input[type="checkbox"].mam-checkbox9::before{
    content:"";
    position:absolute;
    width:0.4em;
    height:0.2em;
    border-radius:0.1em;
    left:0.1em;
    top:0.6em;
    background:#FFF;/*チェックの色*/
    transform-origin:0.3em 0.1em 0;
    transform:rotate(45deg);
  }
  input[type="checkbox"].mam-checkbox9:checked::before{
    background:#333;/*チェックの色*/
  }
  input[type="checkbox"].mam-checkbox9::after{
    content:"";
    position:absolute;
    width:0.7em;
    height:0.2em;
    border-radius:0.1em;
    left:0.3em;
    top:0.6em;
    background:#FFF;/*チェックの色*/
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
    transform-origin:0.1em 0.1em 0;
    transform:rotate(-45deg);
  }
  input[type="checkbox"].mam-checkbox9:checked::after{
    background:#333;/*チェックの色*/
  }
</style>

円形の張り出した白黒チェックのチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox10" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox10{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.5em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
  }
  input[type="checkbox"].mam-checkbox10:checked{
    background:#DDD;/*チェックオンの背景色*/
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3) inset;
  }
  input[type="checkbox"].mam-checkbox10::before{
    content:"";
    position:absolute;
    width:0.4em;
    height:0.2em;
    border-radius:0.1em;
    left:0.1em;
    top:0.6em;
    background:#FFF;/*チェックの色*/
    transform-origin:0.3em 0.1em 0;
    transform:rotate(45deg);
  }
  input[type="checkbox"].mam-checkbox10:checked::before{
    background:#333;/*チェックの色*/
  }
  input[type="checkbox"].mam-checkbox10::after{
    content:"";
    position:absolute;
    width:0.7em;
    height:0.2em;
    border-radius:0.1em;
    left:0.3em;
    top:0.6em;
    background:#FFF;/*チェックの色*/
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
    transform-origin:0.1em 0.1em 0;
    transform:rotate(-45deg);
  }
  input[type="checkbox"].mam-checkbox10:checked::after{
    background:#333;/*チェックの色*/
  }
</style>

正方形の張り出した枠が消えるチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox11" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox11{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.0em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.4);
  }
  input[type="checkbox"].mam-checkbox11:checked{
    background:#DDD;/*チェックオンの背景色*/
    background:rgba(0,0,0,0);
    box-shadow:none;
  }
  input[type="checkbox"].mam-checkbox11:checked::before{
    content:"";
    position:absolute;
    width:0.4em;
    height:0.2em;
    border-radius:0.1em;
    left:0.1em;
    top:0.6em;
    background:#333;
    transform-origin:0.3em 0.1em 0;
    transform:rotate(45deg);
  }
  input[type="checkbox"].mam-checkbox11:checked::after{
    content:"";
    position:absolute;
    width:0.7em;
    height:0.2em;
    border-radius:0.1em;
    left:0.3em;
    top:0.6em;
    background:#333;
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.4);
    transform-origin:0.1em 0.1em 0;
    transform:rotate(-45deg);
  }
</style>

円形の張り出した枠が消えるチェックボックス

HTML・CSSソースコードを見る 
<label>
  <input type="checkbox" class="mam-checkbox12" value="1" checked>
  <span style="font-size:20px;">チェックボックス</span>
</label>

<style>
  input[type="checkbox"].mam-checkbox12{
    font-size:20px;/*基本サイズ お好きなサイズに設定*/
    margin:0;
    padding;0;
    box-sizing:border-box;
    position:relative;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width:1em;
    height:1em;
    background:#DDD;/*チェックオフの背景色*/
    border-radius:0.5em;
    box-shadow: 0.1em 0.1em 0.1em 0px rgba(0,0,0,0.4);
  }
  input[type="checkbox"].mam-checkbox12:checked{
    background:#DDD;/*チェックオンの背景色*/
    background:rgba(0,0,0,0);
    box-shadow:none;
  }
  input[type="checkbox"].mam-checkbox12:checked::before{
    content:"";
    position:absolute;
    width:0.4em;
    height:0.2em;
    border-radius:0.1em;
    left:0.1em;
    top:0.6em;
    background:#333;
    transform-origin:0.3em 0.1em 0;
    transform:rotate(45deg);
  }
  input[type="checkbox"].mam-checkbox12:checked::after{
    content:"";
    position:absolute;
    width:0.7em;
    height:0.2em;
    border-radius:0.1em;
    left:0.3em;
    top:0.6em;
    background:#333;
    box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.4);
    transform-origin:0.1em 0.1em 0;
    transform:rotate(-45deg);
  }
</style>

フラットなチェックボックス

HTML・CSSソースコードを見る 
<div class="fontsize20pt">
  <label>
    <input type="checkbox" class="mam-chkbox" value="1">
    <span class="mam-chkbox-rect">選択肢１（正方形）</span>
  </label>
</div>
<div class="fontsize20pt">
  <label>
    <input type="checkbox" class="mam-chkbox" value="1">
    <span class="mam-chkbox-rect mam-chkbox-roundrect">選択肢２（角が丸い正方形）</span>
  </label>
</div>
<div class="fontsize20pt">
  <label>
    <input type="checkbox" class="mam-chkbox" value="1">
    <span class="mam-chkbox-rect mam-chkbox-circle">選択肢３（円形）</span>
  </label>
</div>

<style>
  .fontsize20pt{font-size:20pt;}
  .mam-chkbox {
    display: none;
  }
  .mam-chkbox + .mam-chkbox-rect{
    padding-left: 1.2em;
    position: relative;
  }
  .mam-chkbox + .mam-chkbox-rect::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    padding:0;
    margin: 0;
    border: 1px solid #111;
    background: #eee;
    border-radius: 0;
  }
  /* checked属性有の要素の 直後の隣接要素 */
  .mam-chkbox:checked + .mam-chkbox-rect::before {
    background: #666;
  }
  /* checked属性有の要素の 直後の隣接要素 */
  .mam-chkbox:checked + .mam-chkbox-rect::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.7em;
    left: 0.2em;
    width: 0.5em;
    height: 0.3em;
    margin-top:-0.5em; /* ネガティブマージン */
    transform: rotate(-45deg); /* 反時計回り 45度 */
    border-top:none;
    border-bottom: 0.2em solid #eee;
    border-left: 0.2em solid #eee;
    border-right:none;
  }
  .mam-chkbox + .mam-chkbox-roundrect::before{
    border-radius:30%;
  }
  .mam-chkbox + .mam-chkbox-circle::before{
    border-radius:50%;
  }
</style>