css修改原生radio样式
日常工作中经常会用到单选框radio,而原生样式不好看无法满足项目要求,模拟写一个又比较麻烦,所以写了一个改变原生样式的demo。
原生样式:
改变后的样式:
以下为demo代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html> <head> <title></title> <style type= "text/css" > .input_radio li { display : inline- block ; position : relative ; list-style : none ; } .input_radio input[type= "radio" ] { display : none ; } .input_radio span { padding : 0 12px ; display : inline- block ; background : #F4F4F4 ; border : 1px solid #F4F4F4 ; border-radius: 4px ; line-height : 28px ; text-align : center ; color : #2D333B ; cursor : pointer ; } .input_radio input:checked+span { background : rgba( 93 , 142 , 216 , 0.16 ); border-color : #5D8ED8 ; color : #5D8ED8 ; } </style> </head> <body> <ul class= "input_radio" > <li> <label for= "optionLable00" > <input id= "optionLable00" name= "option0" type= "radio" checked= "checked" > <span class= "option-label" >橙色</span> </label> </li> <li> <label for= "optionLable01" > <input id= "optionLable01" name= "option0" type= "radio" > <span class= "option-label" >红色</span> </label> </li> </ul> </body> </html> |
分类:
CSS
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Huawei LiteOS基于Cortex-M4 GD32F4平台移植
· mysql8.0无备份通过idb文件恢复数据过程、idb文件修复和tablespace id不一致处