Html CSS：样式单选按钮旁边有标签？

我试图设计一个单选按钮的样式，并使用CSS将标签与单选按钮内联

但是单选按钮看起来不正确，而且它的标签与它不一致

我需要做到这一点：

这就是我到目前为止所做的：

input[type=“radio”]{
显示：无；
}
输入[type=“radio”]+标签
{
背景：#fff；
边框：实心2px#000；
高度：20px；
宽度：20px；
显示：内联块；
填充：0像素；
边界半径：50%；
}
输入[type=“radio”]：选中+标签
{
背景：#000；
高度：20px；
宽度：20px；
显示：内联块；
填充：0像素；
边界半径：50%；
}

男性
女性

您可以在标签前查看，因此它看起来像图像

输入{
显示：无；
}
标签{
浮动：左；
右边距：10px
}
标签跨度{
宽度：16px；
高度：16px；
背景色：#fff；
边界半径：50%；
边框：1px实心#222；
浮动：左；
右边距：5px；
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-webkit内容：中心；
-莫兹盒包装：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-moz框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
输入：选中+标签范围：之前{
内容：''；
位置：绝对位置；
宽度：8px；
高度：8px；
边界半径：50%；
背景色：#222；
}

男性
女性

您可以在标签前查看，因此它看起来像图像

输入{
显示：无；
}
标签{
浮动：左；
右边距：10px
}
标签跨度{
宽度：16px；
高度：16px；
背景色：#fff；
边界半径：50%；
边框：1px实心#222；
浮动：左；
右边距：5px；
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-webkit内容：中心；
-莫兹盒包装：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-moz框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
输入：选中+标签范围：之前{
内容：''；
位置：绝对位置；
宽度：8px；
高度：8px；
边界半径：50%；
背景色：#222；
}

男性
女性

如果您同时使用标签显示实际单选按钮和实际标签，您确实会遇到问题： 现在，你告诉你

是一个20像素宽的圆，同时包含你的文本。 请尝试以下方法：

input[type="radio"] + label::before
{
    background: #fff;
    border: solid 2px #000;
    height: 20px;
    width: 20px;
    display:inline-block;
    padding: 0 0 0 0px;
    border-radius:50%;
    margin-right:5px;
}

这将向标签中添加一个伪元素，您可以将其设置为任何

或

的样式。 另外，对于您选中的单选按钮，我将简化：

input[type="radio"]:checked + label::before
{
    background: #000;
}

---

如果同时使用标签显示实际单选按钮和实际标签，则确实会遇到问题： 现在，你告诉你

是一个20像素宽的圆，同时包含你的文本。 请尝试以下方法：

input[type="radio"] + label::before
{
    background: #fff;
    border: solid 2px #000;
    height: 20px;
    width: 20px;
    display:inline-block;
    padding: 0 0 0 0px;
    border-radius:50%;
    margin-right:5px;
}

这将向标签中添加一个伪元素，您可以将其设置为任何

或

的样式。 另外，对于您选中的单选按钮，我将简化：

input[type="radio"]:checked + label::before
{
    background: #000;
}

---

只需在

输入+标签中添加一个
：：before


input[type=“radio”]{
显示：无；
}
输入[type=“radio”]+标签：：在
{
内容：''；
背景：#fff；
边框：实心2px#000；
高度：20px；
宽度：20px；
显示：内联块；
填充：0像素；
边界半径：50%；
}
输入[type=“radio”]：选中+标签：：之前
{
背景：#000；
高度：20px；
宽度：20px；
显示：内联块；
填充：0像素；
边界半径：50%；
}

男性
女性
只需在
输入+标签
之前添加一个
：


input[type=“radio”]{
显示：无；
}
输入[type=“radio”]+标签：：在
{
内容：''；
背景：#fff；
边框：实心2px#000；
高度：20px；
宽度：20px；
显示：内联块；
填充：0像素；
边界半径：50%；
}
输入[type=“radio”]：选中+标签：：之前
{
背景：#000；
高度：20px；
宽度：20px；
显示：内联块；
填充：0像素；
边界半径：50%；
}

男性
女性
如果您愿意接受一些HTML调整，您可能会发现这更灵活：

确保输入包含一个
焦点
状态，以确保键盘用户可以访问该状态


input[type=“radio”]{
位置：绝对位置；
不透明度：0；
光标：指针；
}
标签{
位置：相对位置；
光标：指针；
左侧填充：30px；
显示：内联块；
线高：1.6；
右边距：15px；
}
跨度{
位置：绝对位置；
左：0；
排名：0；
高度：20px；
宽度：20px；
背景：#FFF；
边框：2件纯黑；
边界半径：50%；
}
跨度：之后{
内容：''；
位置：绝对位置；
左：5px；
顶部：5px；
宽度：10px；
高度：10px；
边界半径：50%；
背景：黑色；
显示：无；
}
输入[type=“radio”]：选中~span:之后{
显示：块；
}
输入[type=“radio”]：焦点~span{
外形：2倍纯橙；
}
男性
女性
如果您愿意接受一些HTML调整，您可能会发现这更灵活：

确保输入包含一个
焦点
状态，以确保键盘用户可以访问该状态


input[type=“radio”]{
位置：绝对位置；
不透明度：0；
光标：指针；
}
标签{
位置：相对位置；
光标：指针；
左侧填充：30px；
显示：内联块；
线高：1.6；
右边距：15px；
}
跨度{
位置：绝对位置；
左：0；
排名：0；
高度：20px；
宽度：20px；
背景：#FFF；
边界：2倍左右