Material Design checkbox

Стилизация чекбоксов в стиле Material Design

by michananya

HTML

<div class="checkbox">
    <input type="checkbox" id="checkbox-1" class="checkbox__input">
    <label for="checkbox-1" class="checkbox__label">Checkbox 2</label>
  </div>
    <div class="checkbox">
    <input type="checkbox" id="checkbox-2" class="checkbox__input">
    <label for="checkbox-2" class="checkbox__label">Checkbox 2</label>
  </div>
    <div class="checkbox">
    <input type="checkbox" id="checkbox-3" class="checkbox__input">
    <label for="checkbox-3" class="checkbox__label">Checkbox 2</label>
  </div>
    <div class="checkbox">
    <input type="checkbox" id="checkbox-4" class="checkbox__input">
    <label for="checkbox-4" class="checkbox__label">Checkbox 2</label>
  </div>
    <div class="checkbox">
    <input type="checkbox" id="checkbox-5" class="checkbox__input">
    <label for="checkbox-5" class="checkbox__label">Checkbox 2</label>
  </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
    margin: 50px;
    min-height: 300px;
}

}

.checkbox {
  font-family: 'open-sans', sans-serif;
  line-height: 30px;
  height: 30px;
}

.checkbox__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.checkbox__label {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.87);
  position: relative;
  cursor: pointer;
  line-height: 30px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 28px;
}
@media screen and (min-height: 600px) {
  .checkbox__label {
    line-height: 24px;
  }  
}
@media (min-height: 600px) {
  .checkbox__label {
    line-height: 50px;
  }  
}

.checkbox__label:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 3px;
  border: 2px rgba(0, 0, 0, 0.54) solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.checkbox__input:checked ~ .checkbox__label:before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
  background-color: #266268;
  border-color:...