scss CF7定制radio-btn

Posted 2021-05-18

.wpcf7-list-item {
  display: inline-block;
  max-width: 222px;
  width: 100%;
  margin-left: 0;
  margin-right: -2px;
  label {
    max-width: 230px;
    width: 100%;
    border: 1px solid #b8b8b8;
    position: relative;
    z-index: 9;
    cursor: pointer;
    &:focus,
    &:hover {
      color: $blue;
    }
    input[type=radio] {
      opacity: 0;
      position: absolute;
      + .wpcf7-list-item-label {
        margin-right: 45px;
        &:after {
          content: '';
          display: inline-block;
          width: 18px;
          height: 20px;
          position: absolute;
          opacity: 0;
          top: 16px;
          right: 25px;
          background: url("../images/w-check-icon.png") no-repeat;
          cursor:pointer;

        }
      }
      &:checked + .wpcf7-list-item-label {
        color: $blue;
        font-family: $OpSanBo;
        &:after {
          opacity: 1;
        }
      }
    }
    
    
    //no scss
    input[type="radio"] + .wpcf7-list-item-label::after {
      display:inline-block;
      width: 18px;
      height: 20px;
      position: absolute;
      opacity: 1;
      top: 16px;
      right: 35px;
      background: url("../images/w-check-icon.png") no-repeat;
      cursor:pointer;
    
    }
    input[type="radio"] + .wpcf7-list-item-label::after {
      content: '';
      opacity: 0;
    
    }
    input[type="radio"]:checked + .wpcf7-list-item-label::after {
      content: '';
      opacity: 1;
    }
    //
  }
}