使用css制作radio,checkbox和switch

最新推荐文章于 2023-06-13 16:36:37 发布

半开半落

最新推荐文章于 2023-06-13 16:36:37 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_44418100/article/details/97553904

前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何通过CSS自定义网页中radio和checkbox的样式，包括颜色和背景等，实现个性化页面设计。作者强调了在定义radio时务必设置name属性的重要性。

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

作者：张铭标

撰写时间：2019年7月 26日

有时候我们使用默认的checkbox,radio和switch的时候,会觉得这个样式不是自己想要的,会感觉很丑.我们有时候需要美化一下radio和checkbox,这个时候有没有一种办法可以做到这一点呢?答案当然是有的,而且我们还可以自己定义这些选框的样式,知道了原理之后就可以实现属于你自己有着自己独特风格的页面.

具体代码:

radio:

女

radio选择时的样式: (颜色可以自己调节)

.tg-icheck-radio > input:checked + .tg-icheck-media
{

border-color: blue;

background: green;

}

这里需要注意的是:定义radio时,请务必要定义name属性.

checkbox: