首页 > 其他分享 >css 修改复选框的样式

css 修改复选框的样式

时间:2022-12-19 16:34:01浏览次数:37  
标签:checkbox 样式 type 复选框 input border css

效果图:

实现代码如下:

/* 选中input标签类型为复选框的 */
input[type="checkbox"] {
   width: 16px;
   height: 16px;
   vertical-align: middle;
   -webkit-appearance: none;
   /*清除默认样式*/
   border: 1px solid #D1D1D1;
   border-radius: 3px
}

/* 点击选中时 */
input[type="checkbox"]:checked {
   background: url("https://pic.imgdb.cn/item/63a01ca8b1fccdcd365fc380.png") no-repeat center center;
   background-size: 20px;
}

 

标签:checkbox,样式,type,复选框,input,border,css
From: https://www.cnblogs.com/fairya/p/16992473.html

相关文章

  • css 横向滚动
    ul{/*允许横向滚动*/overflow-x:scroll;display:flex;/*禁止纵向滚动*/overflow-y:hidden;/*文本平铺*/text-align:justify;justif......
  • 开局一张图,构建神奇的 CSS 效果
    假设,我们有这样一张Gif图:利用CSS,我们尝试来搞一些事情。图片的GlitchArt风在这篇文章中--CSS故障艺术,我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有......
  • echarts警告、css元素隐藏
    在页面渲染的时候,控制台有时候会出现  Thereisachartinstancealreadyinitializedonthedom  的警告,这种原因是因为echarts的dom已经存在。解决方法:在加载ec......
  • CSS Grid 网格布局教程
    一、概述网格布局(Grid)是最强大的CSS布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的CSS框架达到的效果,现在浏览......
  • 18号CSS学习
    一、CSS简介 1.HTML局限性只关注内容的语义。“丑”2.CSS-网页的美容师CSS是层叠样式表的简称,也称为CSS样式表或级联样式表。主要用于设置HTML页面中的文本内容(......
  • wps js 复制wps样式,以及造成的系统崩溃的分析
     今天在学习wpsjs样式设置。按照wpsjs的开发文档。复制样式应该使用的是 Application.OrganizerCopy方法。这个方法的格式是:express.OrganizerCopy(Source, Des......
  • 前端学习-CSS-08-盒子模型
    学习时间:2022.11.13目录盒子模型盒子模型的介绍内容的宽高边框(border)连写形式单方向设置单个属性简单案例内边距(padding)内减模式外边距(margin)外边距折叠现象1-合并......
  • 前端学习-CSS-09-浮动
    学习时间:2022.11.14目录浮动结构伪类选择器伪元素浮动浮动的作用浮动的特点清除浮动浮动带来的影响清除浮动的方法方法1:给父母元素加一个高度方法2:额外标签法方法3:单伪元......
  • 前端学习-CSS-10-CSS定位装饰
    学习时间:2022.11.30目录CSS定位装饰定位定位的基本介绍定位的基本方式staticrelativeabsolutefixed不同元素之间的层级关系装饰垂直对齐光标类型边框圆角overflow溢出部分......
  • 实用HTML,CSS和JavaScript速查表--转载
    速查表是帮你记住东西的有效工具。Web设计师和开发者经常使用的快捷键简表会使他们在网上的工作效率大大提高。事实上,速查表就是来帮助我们把日常中最常用到的信息聚集起来......