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

最新推荐文章于 2022-02-22 16:34:39 发布
最新推荐文章于 2022-02-22 16:34:39 发布
阅读量8.4k 收藏 3
点赞数
分类专栏： web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nzzl54/article/details/84374619
版权
这篇博客记录了如何使用CSS自定义HTML单选按钮（radio）的样式。通过CSS实现了点击前后的效果变化，并提供了布局调整的技巧，如元素浮动和边框分割选项。代码示例中采用了jQuery进行交互处理，需要引入jQuery库。
摘要由CSDN通过智能技术生成

最近需要自定义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
最低0.47元/天 解锁文章
星旅zl
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css 实现单选和多选按钮（input checkbox按钮 radio按钮）
宝码香车的博客
07-29 997
纯css实现，没有js。点击事件是input的checked实现的。含具体代码帮助大家深入理解，彻底掌握！直接看代码，可以一键复制，查看效果。
前端入门：HTML（表单）
最新发布
yscy0801的博客
03-28 1568
前端
html+css3实现自定义radio
timeless的博客
04-05 2734
radio .radio-group { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-
HTML自定义radio单选按钮(纯css版,样式可以随意改变)
weixin_30721899的博客
08-17 732
html: <div> <input id="item1" type="radio" name="item" value="选项一" checked> <label for="item1"></label> <span>选项一</span> ...
html 单选 radio使用,html radio单选按钮JS脚本控制
weixin_42303285的博客
06-16 1499
html radio单选按钮JS脚本控制 raido式input type='radio' name='test' value='v1' / 使用JS脚本判断是否有name为test的radio被选中，并alert选中radio的。 function checkradio(){ var test=document.getElementsByName(test);//这里得到name为test的元素...
html自定义radio样式,checkbox/radio自定义样式
weixin_29205373的博客
06-15 349
效果图：HTML部分：CSS部分：table tr th, table tr td {border: 1px solid #ccc;padding: 20px;}table {width: 200px;text-align: center;border-collapse: collapse;}.checkbox-custom , .radio-custom {position: relative;...
html radio
Stainky的专栏
01-11 978
html中的radio元素用于平行选项的选择： 在线网银     支付宝     财付通     银行打款     备注： 1.name必须一样，这样四个选项只有一个能被选中； 2.当某个选项被选中时，它的值就是对应的value。
html:radio
Roger★L☆M☆J★
08-15 937
 html:radio标签生成一个radio。主要的用法有两种，下面我们通过代码来示例。下面的代码示例了html:radio标签的一般用法，如果被提交则选中的radio的value值将被提交到radioForm中的id中。  One  Two下面的代码示例了html:radio标签的典型用法，其中的persons和bean:define标签中的一致，您可以参考bean:define标签。我
html css radio单选按钮样式
韩梦飞沙_韩亚飞
02-22 1160
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title...
CSS3自定义单选按钮美化特效
07-24
综上所述，CSS3自定义单选按钮美化特效涉及到的关键技术包括：隐藏原始单选按钮、创建自定义样式元素、使用`:checked`伪类控制选中状态、应用过渡效果以及利用伪元素创建特殊图形。通过这些技术的结合运用，我们可以...
CSS3自定义单选按钮美化特效.zip
10-09
本资源“CSS3自定义单选按钮美化特效.zip”提供了一种实现单选按钮（radio button）美化的解决方案，特别适合于那些希望提升用户体验和界面美观度的网站。 单选按钮是网页表单中常见的交互元素，通常用于让用户在一...
jQuery实现一个自定义的单选按钮radio
03-17
综上所述，实现一个自定义的jQuery单选按钮组件涉及到HTML结构、jQuery选择和操作、CSS样式以及ECMAScript 6的语法应用。通过熟练掌握这些技能，你可以创建出符合项目需求、用户体验良好的前端组件。
HTML radio 单选按钮
子溪随笔
11-15 7139
今天要写的页面上有一个单选按钮的标签，或者说控件。然后写了几次，发现总是写不对，两个选项总是可以同时选中。记得刚学HTML的时候，这个是很简单的一个标签。于是上网看网页加自己动手实验，找到了问题所在。 分析：首先，创建一个单选按钮： 男     女；这样写的话，两者是可以同时选中的。 解决：在input标签中加一个name属性，让两者的name属性值相同，这样系统就会知道包含这个相同name值
HTML DOM radio
tang89176的博客
04-03 173
一、radio <div class="form-group"> <label class="col-sm-3 control-label">类型：</label> <div class="col-sm-8"> <label class="radio-inline"> <input type="radio" na...
html自定义radio样式,用纯CSS 自定义radio checkbox 样式
weixin_35572715的博客
06-19 285
以前做自定义样式的radio, checkbox 的时候，一直是如下结构文字然后定义diyRadio 的样式作为新Radio, 再用js 做关联。知道今天才知道可以用标签的for 属性 + :checked 做，纯CSS(真是太不应该了，学东西还是要认真、细致点。)DIY 单选项示例如下：radio1radio2radio3/* CSS */.radio-beauty-container {fon...
HTML使用纯css自定义radio单选按钮样式，可以随意改变风格（附源码）
刺心的博客
05-20 2004
<div class="box"> <input type="radio" name="item" value="1"> <label for="item1"></label> </div> .box{ height : 0.6rem; display : flex; align-items: center; position : relative; line-height: 30px; .
html单选按钮自定义,css | radio单选按钮样式自定义
weixin_39637614的博客
06-15 621
radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的.单选按钮最常见的地方就是性别的选择,这里以此为例,html代码如下:性别：男女保密css改变radio按钮样式,这里使用了伪类(在css中一定要擅用伪类,能更好的实现功能):.formSex input{display: ...
html的radio单选框样式,radio单选框自定义样式等css集合
weixin_39740737的博客
06-03 1213
1.radio自定义样式双层圆点效果复制代码width: 30rpx;height: 30rpx;display: inline-block;padding: 6rpx;border: 1px solid #2639a0;border-radius: 50%;background-color: #2639a0;background-clip: content-box;复制代码2.css制作菜单图标...
表单自定义是否单选按钮
06-08
如果您想要自定义单选按钮的外观，可以使用 CSS 样式来修改它们的样式。以下是一个示例： ```html <style> /* 隐藏原始单选按钮 */ input[type="radio"] { display: none; } /* 自定义单选按钮的外观 */ .custom-radio { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ccc; position: relative; margin-right: 10px; } /* 自定义单选按钮被选中时的样式 */ .custom-radio::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; opacity: 0; transition: opacity 0.2s; } /* 当原始单选按钮被选中时，使用上面的样式来渲染自定义单选按钮 */ input[type="radio"]:checked + .custom-radio::after { opacity: 1; } </style> <form> <label> <input type="radio" name="gender" value="male"> <span class="custom-radio"></span> Male </label> <label> <input type="radio" name="gender" value="female"> <span class="custom-radio"></span> Female </label> <label> <input type="radio" name="gender" value="other"> <span class="custom-radio"></span> Other </label> </form> ``` 在上面的示例中，我们首先使用 CSS 隐藏了原始单选按钮，然后为每个单选按钮创建了一个自定义的外观。我们还定义了一个伪元素（`:after`），用于在选中单选按钮时显示一个小圆点。 要使用自定义样式的单选按钮，您需要将原始单选按钮与自定义样式相关联。在上面的示例中，我们使用了 `<label>` 元素来实现这一点。当用户单击 `<label>` 元素时，将自动选中与其中的 `<input>` 元素相关联的单选按钮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值