内容简介:checkbox/ radoi默认不支持更改背景颜色,这里可以使用伪类来实现。基本原理是利用after/ before插入新的元素。然后利用新元素的背景颜色或背景图片覆盖掉原来的样式。CSS代码:HTML 示例:
checkbox/ radoi默认不支持更改背景颜色,这里可以使用伪类来实现。基本原理是利用after/ before插入新的元素。然后利用新元素的背景颜色或背景图片覆盖掉原来的样式。
CSS代码:
input[type=checkbox] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 12px; position: relative; } input[type=checkbox]:after { position: absolute; width: 10px; height: 15px; top: 0; content: " "; background-color: #ff0000; color: #fff; display: inline-block; visibility: visible; padding: 0px 3px; border-radius: 3px; } input[type=checkbox]:checked:after { content: "✓"; font-size: 12px; } input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 12px; position: relative; } input[type=radio]:after { position: absolute; width: 10px; height: 15px; top: 0; content: " "; background-color: #ff0000; color: #fff; display: inline-block; visibility: visible; padding: 0px 3px; border-radius: 50%; } input[type=radio]:checked:before { content: "✓"; display: block; position: relative; top: -2px; left: 3px; width: 6px; height: 6px; color: #fff; font-weight: 400; z-index: 1; }
HTML 示例:
<input type="checkbox" name="method" value="plus" checked>plus<br> <input type="checkbox" name="method" value="minus">minus<br> <input type="radio" name="method" value="plus">plus<br> <input type="radio" name="method" value="minus" checked>minus<br>
示例: https://jsbin.com/wawoguq/edit?html,css,output
参考: stackoverflow
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- CSS 样式,如何计算临近颜色值?
- 颜色搭配及颜色科学
- CSS教程:图片使用混合模式和颜色叠加filter滤镜,改变PNG图标颜色
- OpenGL ES入门: 渲染金字塔 - 颜色、纹理、纹理与颜色混合填充以及GLKit实现
- WebGL 纹理颜色原理
- 【Leetcode】75.颜色分类
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据密集型应用系统设计
Martin Kleppmann / 赵军平、李三平、吕云松、耿煜 / 中国电力出版社 / 2018-9-1 / 128
全书分为三大部分: 第一部分,主要讨论有关增强数据密集型应用系统所需的若干基本原则。首先开篇第1章即瞄准目标:可靠性、可扩展性与可维护性,如何认识这些问题以及如何达成目标。第2章我们比较了多种不同的数据模型和查询语言,讨论各自的适用场景。接下来第3章主要针对存储引擎,即数据库是如何安排磁盘结构从而提高检索效率。第4章转向数据编码(序列化)方面,包括常见模式的演化历程。 第二部分,我们将......一起来看看 《数据密集型应用系统设计》 这本书的介绍吧!