[CSS 3] Create Custom Keyboard Accessible Checkboxes
CSS create Custom keyboard accessible
2023-09-14 09:00:47 时间
Take the native HTML checkboxes and jazz them up while still ensuring they are keyboard accessible. We use pseudo-elements and pseudo-classes to replicate the focus and the ability to tab to custom checkboxes.
/* hide native one */ input[type="checkbox"] + label { display: block; position: relative; padding-left: 2rem; } /* create a checkbox */ input[type="checkbox"] + label::before { content: ''; position: absolute; top: 4px; left: 0; width: 22px; height: 22px; background: #fff; } /* highlighted on checked */ input[type="checkbox"]:checked + label::before { background: #6505CC; } /* Create a checked mark */ input[type="checkbox"] + label::after { content: ''; position: absolute; top: 3px; left: 6px; width: 8px; height: 16px; border-width: 0 2px 2px 0; border-color: #fff; border-style: solid; transform: rotate(38deg); } /* Outline on focus */ input[type="checkbox"]:focus + label::before { outline: #5d9dd5 solid 1px; box-shadow: 0 0px 8px #5e9ed6; }
相关文章
- 总结一些,书写 CSS 的时候,经常犯的错误!
- UnCSS - 在线精简去除多余无用的 CSS
- 使用CSS gradient制作绚丽渐变纹理背景效果
- 【说站】CSS中motion path模块的介绍
- CSS中字体和文本关键属性值
- 【原创】CSS中常用伪元素
- 前端必备的 CSS 库,normalize.css
- 【CSS教程】简约渐变色登陆布局html+css代码
- 【CSS】CSS 文本样式 ③ ( 文字排版案例一 | 设置标题 | div 中设置布局 | hr 标签设置横线 | p 标签分割段落 | 设置页面总体文字大小 | 修改 h1 标签样式 )
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- 【CSS】更改用户界面样式 ③ ( 取消文本域拖拽 | 代码示例 )
- ORA-09872: TASDEF_CREATE: create failure in creating ?/dbs/tasdef@.dbf. ORACLE 报错 故障修复 远程处理
- The Shapes of CSS(css的形状)详解编程语言
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- 首届世界CSS设计大赛结果揭晓
- 根据分辩率调用不同的CSS.
- CSS顶级技巧大放送,div+css布局必知