复选框样式修改(复选框变为圆形)

简介: 复选框样式修改(复选框变为圆形)

一、案例简介


默认的复选框是方形的,有时候项目需求要改为圆形,这时候就很头疼啊,因为自己用css直接改,效果没有任何变化。如下:

接下来我们看下如何用css实现它吧:

/*复选框未勾选前的样式*/
input[type="checkbox"]{ 
  appearance:none;/*取消默认的复选框样式*/
  /*重新写一个复选框圆角样式*/
  width:20px;/*设置方形宽度为20px*/
  height:20px;/*设置方形高度为20px*/
  border:1px solid #aaaaaa;/*设置边框样式*/
  border-radius:50%;/*将方形的边框改为圆形*/
}
 
/*复选框选择后的样式*/
input[type="checkbox"]:checked {
  transition:all 0.3s;
  background-image:url(../img/gou.png);/*复选框选中后添加背景图片*/
  background-repeat:no-repeat;/*取消背景图片平铺*/
  background-size:27px 27px;/*背景图片大小,第一个27px表示width宽度,第二个27px表示height高度*/
  background-position: center;/*背景图居中对齐*/
}


这样就可以实现一个简单的圆形


点击之前效果:


checkbox选中之后的效果:

目录
打赏
0
0
0
0
3
分享
相关文章
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
UniApp 组件 u-tabs 详细讲解
UniApp 组件 u-tabs 详细讲解
2360 1
uniapp使用u-checkbox
uniapp使用u-checkbox
844 1
uniapp 如何封装uni.request请求(登录接口、业务接口)
uniapp 如何封装uni.request请求(登录接口、业务接口)
uniapp 如何封装uni.request请求(登录接口、业务接口)
如何把input复选框如何变成好看的圆形
如何把input复选框如何变成好看的圆形
204 0
PDF在线预览实现:如何使用vue-pdf-embed实现前端PDF在线阅读
本文详细介绍了如何在Vue项目中使用vue-pdf-embed实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化,希望对你有所帮助。在实际项目中,灵活运用这些技术可以大大提升用户体验和项目质量。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
2782 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问