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

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

一、案例简介


默认的复选框是方形的,有时候项目需求要改为圆形,这时候就很头疼啊,因为自己用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选中之后的效果:

相关文章
|
小程序 前端开发 Android开发
解决小程序中textarea ios端样式不兼容的两种方法
解决小程序中textarea ios端样式不兼容的两种方法
1025 0
|
前端开发
前端引入字体文件
文章介绍了如何在前端项目中引入字体文件,并展示了具体的HTML和CSS代码示例,包括如何使用`@font-face`规则来定义字体和在页面中应用自定义字体。
858 1
前端引入字体文件
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
10060 90
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
29824 154
|
测试技术 Python
分支覆盖 (Branch Coverage)
分支覆盖 (Branch Coverage) 是一种软件测试覆盖率评估方法,能够测量代码中每个分支的执行情况,即代码中每个条件语句 (if-else 语句) 的所有可能分支是否都被执行过。
5198 1
|
人工智能 自然语言处理 API
谷歌Gemini入口_(Google gemini Pro官方网站入口)
Gemini是 Google 开发的多模态 AI 语言模型。可以理解和生成人类语言,并协助各种与语言相关的任务。
|
容器
Element UI 自定义环形进度条里的内容
Element UI 自定义环形进度条里的内容
863 2
uniapp 分享功能-分享给朋友群聊朋友圈效果(整理)
uniapp 分享功能-分享给朋友群聊朋友圈效果(整理)
|
移动开发 小程序 前端开发
uniap开发微信小程序如何在线预览pdf文件
这是一段关于在线预览和处理PDF的多方案说明,包括使用JavaScript库PDF.js(如`pdfh5.js`)实现H5页面预览,提供QQ群和技术博客链接以获取帮助和支持。还介绍了两个适用于Uni-app的插件,一个用于H5、小程序和App中的PDF预览和下载,另一个专门解决手机端PDF预览问题。此外,还详细描述了在Uni-app中使用微信小程序API`wx.openDocument`显示PDF的步骤,包括上传文件、配置权限和编写代码。

热门文章

最新文章