如何实现单选按钮选中时带边框及右上角对勾的样式

云原生阿岚

2026-9-24

实现方案

核心调整点

补全单选框id与labelfor的关联关系，保证交互正常触发
新增对勾图标选中态显示、绝对定位的样式规则
调整单选框选中态的边框样式匹配需求

修改后可直接运行代码

<template>
  <div>
    <h3 class="font-Rubik text-xs font-medium tracking-wide uppercase mb-1 mt-3 text-tcolor">To‘lov summasi</h3>
    <div class="flex flex-wrap">
      <div class="relative p-2">
        <!-- 补全id、name属性，同组单选框name要保持一致 -->
        <input id="1000" class="absolute" type="radio" name="pay_amount" />
        <label for="1000" class="inline-block px-3 py-2 border border-gray-200 rounded relative">
          1000
          <span class="text-uzs text-xs font-Rubik font-normal">UZS</span>
          <i class="fas fa-check absolute tick hidden"></i>
        </label>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  
}
</script>

<style scoped lang="scss">
.tick{
  top: -5px;
  right: -5px;
  // 可选：添加小背景让对勾显示更清晰
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #1FBED6;
  color: #1FBED6;
  font-size: 10px;
} 
input[type="radio"]{
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  // 隐藏原生单选框，不占用可视区域
  opacity: 0;
  width: 0;
  height: 0;
  // 选中态控制样式
  &:checked + label{
    border-color: #1FBED6;
    .fas.fa-check{
      display: block;
    }
  }
}
</style>