使单选按钮看起来有勾号和活动边框

Question

我一直在尝试做这样的事情https://prnt.sc/20x8u7h 试了很多方法，还是达不到想要的状态。

我尝试将 1000 和 uzs 包含在 font awesome 中带有勾号 i class，尝试使用外观：none;，尝试使用位置，已经两天了，仍然想不通。

你能告诉我怎么做吗？

我一直在使用 tailwind，并尝试与同行 classes 一起使用，但出于某种原因它无法使用我的 tailwind，甚至找不到 class，然后决定我最好写我自己的文字。

我只需要让一个单选按钮看起来像打印出来的那样，其余的我可以熟练地复制粘贴。

非常感谢任何帮助提前致谢

理想的状态应该是：单击时，单个单选按钮处于活动状态，并且它的边框带有右侧的勾号：-5px；顶部：-5px，

<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">
        <input class="absolute" type="radio" checked />1000
        <span class="text-uzs text-xs font-Rubik font-normal">UZS</span>
        <label for="1000"  class=""><i class="fas fa-check hidden"></i>               </label>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  
}
</script>

<style scoped lang="scss">
.tick{
top: -5px;
right: -5px;

} 
input[type="radio"]{
 -webkit-appearance: none;
 -moz-appearance: none;
 -ms-appearance: none;
 -o-appearance: none;
 appearance: none;
  width: 30px;
  height: 30px;
  border: 2px solid #1FBED6;
  background-color: white;

  &:checked + label{
   background: none;
  }

Answer 1

您应该使用隐藏 radio button 并使用图标作为检查。使用 grid 列出 labels 将被定位 relative 并将作为图标和文本的容器。您可以使用 + 选择器并为第一个兄弟 label 获取选中的 input:radio 并设置样式。

input[type=radio]:checked + label{
   border: 1px solid indigo;
  }
  
 input[type=radio]:checked + label > span.icon {
  display: inline-block;
 }

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
  <div>
    <h3 class="font-Rubik text-xs font-medium tracking-wide  uppercase mb-1 mt-3 text-tcolor">To‘lov summasi</h3>
    <div class="grid grid-cols-3 gap-2">
    
          <input class="hidden" id="1000" name="uzs" type="radio" checked />
        <label class="block w-full border p-2 relative" for="1000">
          <span class='hidden icon'><i class="fas fa-check border border-indigo-600 bg-indigo-600 text-white rounded-full text-xs p-1 absolute top-0 right-0 -m-2"></i></span>
          1000
          <span class="text-uzs text-xs font-Rubik font-normal">UZS</span>
        </label>
          <input class="hidden" id="5000" name="uzs" type="radio" />
        <label class="block w-full border p-2 relative" for="5000">
          <span class='hidden icon'><i class="fas fa-check border border-indigo-600 bg-indigo-600 text-white rounded-full text-xs p-1 absolute top-0 right-0 -m-2"></i></span>
          5000
          <span class="text-uzs text-xs font-Rubik font-normal">UZS</span>
        </label>
      
    </div>
  </div>

使单选按钮看起来有勾号和活动边框

make radio button look like it has tick and border upon active

css

sass

tailwind-css