Html 如何在css中重新设置radio类型输入的样式？

我想创建自己的单选按钮，但似乎我无法重新设计它们的样式

我得到了以下html：

.segment{
全部：未设置；
位置：相对位置；
边框：纯色1px蓝色；
高度：2em；
宽度：3rem；
-webkit点击突出显示颜色：透明；
}

---

您可以自定义单选按钮，添加

标签和

CSS

这是小提琴，它可能会帮助你：

[type=“radio”]：选中，
[type=“radio”]：未（：选中）{
位置：绝对位置；
左：-9999px；
}
[type=“radio”]：选中+标签，
[type=“radio”]：未（：选中）+标签{
位置：相对位置；
左侧填充：28px；
光标：指针；
线高：20px；
显示：内联块；
颜色：#666；
}
[type=“radio”]：选中+标签：在，
[type=“radio”]：未（：选中）+标签：之前{
内容：''；
位置：绝对位置；
左：0；
排名：0；
宽度：18px；
高度：18px；
边框：1px实心#ddd；
边界半径：100%；
背景：#fff；
}
[type=“radio”]：选中+标签：之后，
[type=“radio”]：未（：选中）+标签：之后{
内容：''；
宽度：12px；
高度：12px；
背景：#F87DA9；
位置：绝对位置；
顶部：4px；
左：4px；
边界半径：100%；
-webkit过渡：所有0.2秒轻松；
过渡：所有0.2秒缓解；
}
[type=“radio”]：未（：选中）+标签：之后{
不透明度：0；
-webkit变换：缩放（0）；
变换：比例（0）；
}
[type=“radio”]：选中+标签：之后{
不透明度：1；
-webkit转换：规模（1）；
变换：比例（1）；
}

一
二
三个

尝试带标签的样品。您需要在代码中为样式收音机添加标签

输入[类型=收音机]{
显示：无；
}
输入[类型=收音机]+标签：之前{
内容：''；
显示：内联块；
边框：2px实心#0F81D5；
高度：12px；
宽度：12px；
边界半径：50%；
保证金：2px 5px 0 0px
}
输入[类型=收音机]：选中+标签：之前{
边框宽度：5px；
高度：6px；
宽度：6px；
}

无线电1
无线电2
无线电3

您应该补充一点，要使其正常工作，标签必须严格遵循无线电输入（直接）