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

Question

我一直在尝试做这样的事情 https://prnt.sc/20x8u7h 我已经尝试了很多方法，但仍然无法达到理想的状态。

我试图将 1000 和 uzs 与字体真棒中的勾号类一起包含在内，尝试使用外观：无;，尝试使用位置，已经两天了，仍然无法弄清楚这一点。

你能建议如何做到这一点吗？

我一直在使用顺风，并尝试使用同伴类，但由于某种原因它不适用于我的顺风，甚至没有找到类，然后决定我可能最好自己写文本。

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

我真的很感激任何帮助，提前谢谢

所需状态应为：单击单个单选按钮时处于活动状态，并且其边框与右侧的勾号：-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并使用图标作为检查。使用网格列出将定位relative的labels，并将用作内部图标和文本的容器。您可以使用+选择器并获取第一个同级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>