Html 单选按钮位置CSS

我正在尝试为性别选择设置此单选按钮的样式，如下图所示：

收音机{
保证金：0.1雷姆；
左边距：2.5雷姆；
页边空白：
}
.无线电输入[type=“radio”]{
位置：绝对位置；
不透明度：0；
}
.收音机输入[type=“radio”]+.收音机标签：在{
内容：''；
背景#f4；
边界半径：100%；
边框：1px实心#b4；
显示：内联块；
宽度：0.9em；
高度：0.9em；
位置：相对位置；
/*位置*/
顶部：-3.4em；
右边距：1米；
垂直对齐：顶部；
光标：指针；
文本对齐：居中；
过渡：所有250ms缓解；
}
.收音机输入[type=“radio”]：选中+.收音机标签：之前{
背景色：#3197EE；
框阴影：插入0 0 4px#f4；
}
.收音机输入[type=“radio”]：焦点+.收音机标签：之前{
大纲：无；
边框颜色：#3197EE；
}
.收音机输入[type=“radio”]：禁用+.收音机标签：之前{
框阴影：插入0 0 4px#f4；
边框颜色：#B4；
背景：#b4；
}
.收音机输入[type=“radio”]+.收音机标签：空：之前{
右边距：0；
}

性*

男性
女性

尝试了一点交换。直到现在我才明白：

收音机{
保证金：0.1雷姆；
左边距：2.5雷姆；
页边空白：
}
.无线电输入[type=“radio”]{
位置：相对位置；
不透明度：0；
}
.收音机输入[type=“radio”]+.收音机标签：在{
内容：''；
背景#f4；
边界半径：100%；
边框：1px实心#b4；
显示：内联块；
宽度：0.9em；
高度：0.9em；
位置：相对位置；
/*位置*/
右边距：1米；
页边顶部：-2px；
垂直对齐：中间对齐；
光标：指针；
文本对齐：居中；
过渡：所有250ms缓解；
}
.收音机输入[type=“radio”]：选中+.收音机标签：之前{
背景色：#3197EE；
框阴影：插入0 0 4px#f4；
}
.收音机输入[type=“radio”]：焦点+.收音机标签：之前{
大纲：无；
边框颜色：#3197EE；
}
.收音机输入[type=“radio”]：禁用+.收音机标签：之前{
框阴影：插入0 0 4px#f4；
边框颜色：#B4；
背景：#b4；
}
.收音机输入[type=“radio”]+.收音机标签：空：之前{
右边距：0；
}

性别*

男性
女性
我已经停止了为你标记它，但是如果你使用推特引导程序框架，请标记为这样。@ ESQEW补充说，谢谢提醒记住要考虑非二进制。gender@ryanve行，这只是测试haha@rwd让我知道这是否是你所期望的。看看我的答案。嗨，谢谢你的回复！因此，我试图根据您的代码调整css，但似乎与当前的样式不一致。我会发布一个截图来显示你添加的截图。这就是我的问题所在now@rwd你想要什么？你能告诉我你想要什么吗？跟你的一样。但是您的css样式似乎不适用于我当前的样式，这就是为什么我的样式在屏幕截图中以这种方式显示