3300.me

radio_checkbox_image_replacement

sample2

// scss

.foo {
  input[type="radio"] {
    display: none;

    + label {
      position: relative;
      display: flex;
      font-size: 14px;
      font-weight: 300;

      &::before {
        content: "";
        background: url(./radio_off.png), url(./radio_on.png);
        background-size: 20px 20px, 0 0;
        width: 20px;
        height: 20px;
        display: block;
        margin-right: 8px;
        position: relative;
        top: -1px;
      }
    }

    &:checked {
      + label {
        &::before {
          background-size: 0 0, 20px 20px;
        }
      }
    }
  }
}

---

<ul>
  <li>
    <div class="foo">
      <input type="radio" name="name1" id="check1" value="" checked="checked">
      <label for="check1">ああああああ</label>
    </div>
  </li>
  <li>
    <div class="foo">
      <input type="radio" name="name1" id="check2" value="">
      <label for="check2">いいいいいい</label>
    </div>
  </li>
  <li>
    <div class="foo">
      <input type="radio" name="name1" id="check3" value="">
      <label for="check3">うううううう</label>
    </div>
  </li>
  <li>
    <div class="foo">
      <input type="radio" name="name1" id="check4" value="">
      <label for="check4">ええええええ</label>
    </div>
  </li>
  <li>
    <div class="foo">
      <input type="radio" name="name1" id="check5" value="">
      <label for="check5">おおおおおお</label>
    </div>
  </li>
</ul>

sample

// scss

.foo {
  input[type="radio"] {
    display: none;

    + label {
      position: relative;
      display: flex;
      font-size: 14px;
      font-weight: 300;

      &::before {
        content: "";
        background: url(./radio_off.png);
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        display: block;
        margin-right: 8px;
        position: relative;
        top: -1px;
      }
    }

    &:checked {
      + label {
        &::before {
          background: url(./radio_on.png);
          background-size: 20px 20px;
        }
      }
    }
  }
}

---

<ul>
  <li>
    <div class="foo">
      <input type="radio" name="name1" id="check1" value="" checked="checked">
      <label for="check1">ああああああ</label>
    </div>
  </li>
  <li>
    <div class="foo">
      <input type="radio" name="name1" id="check2" value="">
      <label for="check2">いいいいいい</label>
    </div>
  </li>
  <li>
    <div class="foo">
      <input type="radio" name="name1" id="check3" value="">
      <label for="check3">うううううう</label>
    </div>
  </li>
  <li>
    <div class="foo">
      <input type="radio" name="name1" id="check4" value="">
      <label for="check4">ええええええ</label>
    </div>
  </li>
  <li>
    <div class="foo">
      <input type="radio" name="name1" id="check5" value="">
      <label for="check5">おおおおおお</label>
    </div>
  </li>
</ul>