自定义单选框radio样式
自定义 样式 radio 单选框
2023-09-11 14:21:35 时间
<!doctype html> <html> <head> <meta charset="utf-8"> <title>自定义单选框radio样式</title> </head> <style> body { margin: 0; } input { padding: 0; margin: 0; border: 0; } .female, .male { position: relative; /* 设置为相对定位,以便让子元素能绝对定位 */ height: 40px; line-height: 40px; margin-left: 40px; } .sex label { display: block; height: 40px; width: 40px; line-height: 40px; font-size: 20px; cursor: pointer; } .sex input { z-index: 3; position: absolute; top: 0; bottom: 0; left: 40px; margin: auto; /* 这里及以上的定位,可以让该元素竖直居中。(top: 0; bottom: 0;) */ opacity: 0; display: block; width: 30px; height: 30px; cursor: pointer; } .sex span { position: absolute; top: 0; bottom: 0; left: 40px; margin: auto; display: block; width: 25px; height: 25px; border: 1px solid #000; border-radius: 50%; cursor: pointer; } .sex span.active { background-color: #000;padding:-5px; } </style> <body> <form action=""> <div class="sex"> <div class="female"> <label for="female">女</label> <input type="radio" name="sex" id="female"> <span class="female-custom"></span> </div> <div class="male"> <label for="male">男</label> <input type="radio" name="sex" id="male"> <span class="male-custom"></span> </div> </div> </form> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script> $("#male").click( function () { $(this).siblings("span").addClass("active"); $(this).parents("div").siblings("div").children("span").removeClass("active"); }); $("#female").click( function () { $(this).siblings("span").addClass("active"); $(this).parents("div").siblings("div").children("span").removeClass("active"); }); </script> </body> </html>
相关文章
- 用POP动画编写带富文本的自定义动画效果
- JS 操作 HTML 自定义属性
- win7禁用其他软件只启用自定义软件的方法
- 自定义的html radio button的样式
- KNOCKOUTJS DOCUMENTATION-绑定(BINDINGS)-自定义绑定
- Android绘图机制(三)——自定义View的实现方式以及半弧圆新控件
- 自定义控件 ------ 画圆+背景色
- PowerShell如何使用自定义公共函数
- Python Django 自定义Manager实现批量删除(逻辑删除)
- C# 自定义数字格式字符串 ToString ###,###,###,##0
- Angular 基于自定义指令的内容投影 content projection 问题的单步调试
- ios自定义相机AVCaptureSession
- 【Android笔记46】Android中如何自定义弹出框样式
- android 自定义Gifview显示gif图片
- Android 自定义带百分比的进度条
- Android 自定义卫星菜单的实现
- Android 自定义ios样式的Switch开关
- Qt自定义Model
- 百度地图开发自定义信息窗口openInfoWindow样式
- (四十八)c#Winform自定义控件-下拉按钮-HZHControls
- 自定义博客园cnblog主题样式Ⅱ(SimpleMemory)
- 162: vue+openlayers 使用draw绘制多边形,导出KML文件,自定义name和style
- Vue(四)绑定样式、自定义指令