CSS

【CSS】チェックボックスとラジオボタンをスタイリングするStyling Checkbox and Radio buttons

May 13, 2017
Styling Checkbox and Radio buttons

Styling Checkbox and Radio buttonsはチェックボックスとラジオボタンをスタイリングするCSS。

CSS

		.checkbox-css, .radio-css {
		  line-height: 30px;
		  padding-left: 30px;
		  position: relative;
		}
		.checkbox-css > input[type="checkbox"], .radio-css > input[type="radio"] {
      height: 0;
      opacity: 0;
      position: absolute;
      width: 0;
    }
    .checkbox-css > input[type="checkbox"] + span, .radio-css > input[type="radio"] + span {
      border: 2px solid #333;
      bottom: 0;
      left: 0;
      margin: auto;
      position: absolute;
      top: 0;
      height: 15px;
      width: 15px;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    .radio-css > input[type="radio"] + span {
      border-radius: 50%;
    }
    .radio-css > input[type="radio"]:checked + span, .checkbox-css > input[type="checkbox"]:checked + span {
     background-color: #1038ef;
    }

HTML

      <label class="checkbox-css"><input type="Checkbox" name="checkbox" checked=""><span></span> Check label</label><br>
      <label class="checkbox-css"><input type="Checkbox" name="checkbox"><span></span> Check label</label><br>
      <label class="checkbox-css"><input type="Checkbox" name="checkbox"><span></span> Check label</label><br>
      <label class="radio-css"><input type="radio" name="radio"  checked=""><span></span> radio label</label><br>
      <label class="radio-css"><input type="radio" name="radio"><span></span> radio label</label><br>
      <label class="radio-css"><input type="radio" name="radio"><span></span> radio label</label><br>