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

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

一、案例简介


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

相关文章
|
5月前
|
JavaScript
Elementplus淡入淡出效果,头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换,侧边栏如何添加阴影,右边如何设置高度,侧边栏如何设置阴影,如何让icon与文字
Elementplus淡入淡出效果,头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换,侧边栏如何添加阴影,右边如何设置高度,侧边栏如何设置阴影,如何让icon与文字
|
小程序 JavaScript
小程序鼠标点击按钮(改变背景颜色字体)
小程序鼠标点击按钮(改变背景颜色字体)
105 0
|
7月前
|
JavaScript 前端开发
JS单选框默认选中样式修改,为白色背景中心有黑色小圆点的样式
JS单选框默认选中样式修改,为白色背景中心有黑色小圆点的样式
57 0
|
前端开发
鼠标点击<input>输入框后边框发生颜色变化
鼠标点击<input>输入框后边框发生颜色变化
103 0
textarea去掉边框和取消选中后的边框
textarea去掉边框和取消选中后的边框
193 0
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
324 0
|
JavaScript
原生js实现复选框选全部框与取消全选框
原生js实现复选框选全部框与取消全选框
78 0
|
前端开发 JavaScript
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
555 0
改变DBGRID的选中行的颜色
默认DBGRID选中行的颜色为深蓝色,可以在程序中改变 在DBGRID的OnDrawColumnCell中写入 if (State=[gdSelectd..gdFocused,gdCurrent]) then begin    Grid.
887 0
tabBar选中的颜色的设置
tabBar选中的颜色的设置
476 0
tabBar选中的颜色的设置