html自定义单选按钮radio（CSS）

最新推荐文章于 2025-02-28 23:44:55 发布

星旅zl

最新推荐文章于 2025-02-28 23:44:55 发布

阅读量8.5k

点赞数

分类专栏： web开发

本文链接：https://blog.youkuaiyun.com/nzzl54/article/details/84374619

版权

这篇博客记录了如何使用CSS自定义HTML单选按钮（radio）的样式。通过CSS实现了点击前后的效果变化，并提供了布局调整的技巧，如元素浮动和边框分割选项。代码示例中采用了jQuery进行交互处理，需要引入jQuery库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近需要自定义radio，参考了一些别人的文章，在这里记录一下自己做的一个小选择页面。

效果图如下：（点击按钮前）

点击按钮并选择后：

颜色大小等都可以根据项目进行修改，这里为了界面的好看，对span整个Div左浮动，选择项右浮动。为了分割开选项，采取了给按钮右边添加border的方法，当然也可以直接划一整条线，大家可以自己试试，接下来上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单选</title>
<style>
span{display:block ;height:32px;vertical-align:m