[CSS] スマホ向けにチェックボックスの装飾

以前、  [CSS] スマホ向けにラジオボタンの装飾で<input type=”radio”>を独自に装飾してみましたが今回は<input type=”checkbox”>をスマホでタップした際にチェックの有無がわかりやすいような装飾にカスタマイズしてみたいと思います。

まずHTMLは<input>と<label>とその子要素に<span>、そしてそれを囲む<div>になります。

<div class="checkbox">
  <input type="checkbox" name="power" value="1" id="power">
  <label for="power">
    <span>&nbsp;</span>
  </label>
</div>

そして装飾のCSSが以下。

.checkbox {
  width: 100px;
  margin: 50px auto 0;
}

label {
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 4px;
  border-radius: 48px;
  background-color: #ebebeb;
}
label::after {
  display: inline-block;
  content: "OFF";
  width: 100%;
  text-align: left;
  color: #a8a8a8;
  box-sizing: border-box;
  padding: 10px 8px 0;
}
label > span {
  position: absolute;
  right: 4px;
  top: 4px;
  display: block;
  width: 40px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  border-radius: 50%;
  text-align:center;
  letter-spacing:normal;
  background-color: #fff;
  cursor: pointer;
  -webkit-transition: .3s ease-out;
  -moz-transition: .3s ease-out;
}

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked + label {
  background-color: #1aba9a;
}
input[type="checkbox"]:checked + label::after {
  content: "ON";
  text-align: right;
  color: #fff;
}
input[type="checkbox"]:checked + label > span {
  right: 56px;
}

  実際のデモはこちら

今回もHTMLを極力小さなソースコードで装飾をCSSのみで実装できたことに満足。CSSがしっかりしてきたおかけで装飾の自由度が格段に上がってきましたね。

  • 2016.03.25
  • お仕事っぽいこと