cssstyle.radio-sex{position:relative;显示：内联块；margin-right:12px;}.radio-sexinput{vertical-align:middle;边距顶部：-2px；底部边距：1px；/*前三行代码是将单选按钮与文本对齐*/width:20px;高度：20px；外观：无；/*清除默认样式*/-webkit-appearance:none;不透明度：0；大纲：无；/*注意不能设置为display:none*/}.radio-sexlabel{position:absolute;左：0；顶部：0；z-指数：-1；/*笔记注意层级关系，如果不把labellevel设置到最低，会阻塞输入，不能单选*/width:20px;高度：20px；边框：1px实心#3582E9；border-radius:100%;}.radio-sexinput:checked+label{background:#3582E9;}.radio-sexinput:checked+label::after{content:"";位置：绝对；左：8px；顶部：2px；宽度：5px；高度：12px；border-right:1pxsolid#fff;border-bottom:1pxsolid#fff;transform:rotate(45deg);}优点：充分利用CSS3的优点，不需要用js和图片，纯CSS3就可以处理缺点：兼容性差，只支持IE9+案例：用图片实现样式修改实现思路1.设置input属性hidden，隐藏输入2.使用labelfortag通过id绑定input，这样点击label时，实际上点击的是input3.定义标签的样式，设置未选中状态的背景图片。建议{高度：12px；宽度：12px；显示：内联块；background-image:url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');背景重复：不重复；背景位置：中心；垂直对齐：中间；边距顶部：-4px；}4。使用相邻选择器设置选中标签的样式input[type="radio"]:checked+.advice{background-image:url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');}以上是radio单选按钮的实现代码，checkbox类似于定义输入类型为checkbox使用插件实现awesome-bootstrap-checkbox插件awesome-bootstrap-checkbox是一个可以美化Bootstrap复选框和单选按钮的插件。它是用纯CSS编写的，没有任何javascript文件。在原生Bootstrap组件的基础上做一些小改动，就可以完成漂亮的美化效果。Demo地址：http://awesome-bootstrap-chec...插件下载：https://www.bootcdn.cn/awesom...注：需要引入awesome-bootstrap-checkbox.css、font-awesome.css和fontawesome对应的字体文件是pretty.csspretty.css是一个纯css3漂亮的checkbox和radio美化效果。pretty.css可以结合多种字体图标来美化原生的checkbox和radio，也可以制作按钮被点击时的动画效果。Demo地址：http://www.htmleaf.com/Demo/2...插件下载：https://www.bootcdn.cn/pretty...我知道的方法先介绍到这里，如果你有更多好的方法欢迎留言讨论。