input修改checkbox复选框默认选中样式

问题描述:

html 复制代码
<input type="checkbox"  />

input修改checkbox默认选中样式,直接设置选中后的样式不生效,需要先给复选框设置-webkit-appearance: none(取消默认样式), 再设置样式才会生效。

默认样式选中前后对比图:

解决示例:

css 复制代码
/* 设置未选中样式 */
input[type="checkbox"] {
  position: relative;
  width: 15px;
  height: 15px;
  line-height: 15px;
  border: 1px solid #949494;

/* 取消默认样式 */
  -webkit-appearance: none;
}
/* 设置选中样式 */
input[type="checkbox"]:checked {
  background-color: red;
}
input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 0;
  width: 15px;
  height: 15px;
  color: #fff;
  text-align: center;
}

选中前后对比图:

相关推荐
hahala233314 分钟前
ESLint 提交前校验技术方案
前端
夕水36 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
Winwin38 分钟前
js基础-数据类型
javascript
Winwin39 分钟前
哈?Boolean能作为回调函数?
javascript
我麻烦大了39 分钟前
实现一个简单的Vue响应式
前端·vue.js
Shartin42 分钟前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.1 小时前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js