Color select

by brunomuller

HTML

<ul class="color-list">
  <li class="color-list__item color-list__item--red">
    <input id="color_red" type="radio" name="color" value="red" checked="checked">
    <label for="color_red"></label>
  </li>
  <li class="color-list__item color-list__item--green">
    <input id="color_green" type="radio" name="color" value="green">
    <label for="color_green"></label>
  </li>
  <li class="color-list__item color-list__item--blue">
    <input id="color_blue" type="radio" name="color" value="blue">
    <label for="color_blue"></label>
  </li>
  <li class="color-list__item color-list__item--white">
    <input id="color_white" type="radio" name="color" value="white">
    <label for="color_white"></label>
  </li>
</ul>

SCSS

.color-list {
  list-style: none;
  padding: 0;
}

.color-list__item {
  display: inline-block;
  position: relative;
  border: 1px solid #dddddd;
  input {
    display: none;
    &:checked + label:before {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      content: "\2714";
      color: #d7d7d7;
      font-size: 15px;
      text-align: center;
    }
  }
  label {
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
}

.color-list__item--red label {
  background-color: #FF3B30;
}

.color-list__item--green label {
  background-color: #4CD864;
}

.color-list__item--blue label {
  background-color: #4A90E2;
}

.color-list__item--white label {
  background-color: white;
}