Jquery 如何使用单选按钮上的文本设置其样式

它试图为单选按钮实现下面的效果，但我不确定最好的方法是什么

我曾尝试使用css隐藏按钮，当我想检查它们时，值不会发送到服务器

我也尝试过像那样使用jquery，但它也不起作用

$(document).ready(function () {
   $('.radio').each(function () {
      $(this).css("visibility", "hidden");
   });
});

所以如果有人能告诉我最好的方法来达到这个效果

---

任何类型的帮助都将非常感谢

技巧是隐藏输入本身，并使用

+

和

:checked

选择器装饰输入的

span

同级

：checked

div{
边框顶部：1px实心#A6；
边框底部：1px实心#A6；
填充：15px0；
显示：内联块；
}
保险商实验室{
填充：0；
保证金：0；
字体系列：arial；
}
李{
列表样式：无；
显示：内联块；
字体大小：12px；
}
跨度{
颜色：#009ACE；
填充物：5px；
光标：指针；
字体大小：粗体；
过渡：所有。2轻松；
字体大小：14px；
}
输入{
显示：无；
}
输入：选中+span{
背景：#009ACE；
颜色：#fff；
}

大小


s


M


L


特大号


我自己的方法是使用样式化的
（显然还有内容），使用
：checked
伪类来设置字母样式：


字段集{
边框左宽度：0；
右边框宽度：0；
}
传奇{
/*
将元素移动到开头的步骤
包含和的行的
要素：*/
浮动：左；
/*
要使元素的文本垂直居中，请执行以下操作：*/
线高：2米；
}
图例~输入[类型=收音机]{
/*
让元素在视觉上清晰可见
已从页面中删除：*/
位置：绝对位置；
左：-10000px；
}
标签{
/*
为了清楚地暗示互动性：*/
光标：指针；
显示：内联块；
宽度：2米；
高度：2米；
背景色：#fff；
颜色：天蓝色；
字体大小：粗体；
文本对齐：居中；
/*
要使文本垂直居中，请执行以下操作：
*/
线高：2米；
边缘：0.5 em；
边界半径：0.5em；
}
/*
要设置以下元素的样式：
在已检查的收音机旁边：*/
输入[类型=收音机]：选中+标签{
颜色：#fff；
背景色：天蓝色；
}

大小
s
M
L
特大号
您的相关（“”）HTML是什么？CSS呢？最好的方法是什么？html和css？jquery？只能用html和css来设置样式。应该很容易找到关于如何做到这一点的教程“最佳方式”要求您定义一些客观要求，但对于样式/演示，我建议使用CSS和HTML。但是，您需要显示（尝试过的）HTML和CSS，以配合已经显示的jQuery。