label元素与单复选框选择技术演示页面

展示

代码

• HTML：

  <h4>充值金额</h4>
  <div class="flex">
      <label class="recomm">
          <input type="radio" name="money" value="150" checked hidden> 
          <span>¥150</span>
          <p>送15.00元</p>
      </label>
      <label>
          <input type="radio" name="money" value="100" hidden> 
          <span>¥100</span>
          <p>送8.00元</p>
      </label>
      <label>
          <input type="radio" name="money" value="50" hidden> 
          <span>¥50</span>
          <p>送0元</p>
      </label>
  </div>

• CSS：

  .flex {
      display: flex;
      justify-content: space-between;
      width: 300px;
      gap: 10px;
  }
  .flex label {
      border: 2px solid #ccc;
      border-radius: .5rem;
      padding: .75rem;
      flex: 1;
      text-align: center;
      position: relative;
  }
  .flex label:has(:checked) {
      border-color: #D7BA98;
      background-color: #FFF6ED;
      background-image: linear-gradient(-135deg, #D7BA98 0%, #D7BA98 18px, transparent 0);
  }
  .flex label:has(:checked)::after {
      content: '';
      position: absolute;
      right: 2px;
      top: 3px;
      width: 8px;
      height: 3px;
      color: white;
      border-left: 2px solid;
      border-bottom: 2px solid;
      transform: rotate(-45deg);
  }
  .flex label span {
      display: block;
      font-size: 28px;
  }
  .flex label span::first-letter {
      font-size: 14px;
  }
  .flex label p {
      margin: 4px 0 0;
      color: gray;
      font-size: 12px;
  }