<style type="text/css">

.chk_1 {

width: 20px;

height: 20px;

position: absolute;

top: 15px;

left: 10px;

}

.chk_1 + label {

background: #ccc;

width: 20px;

height: 20px;

display: inline-block;

position: absolute;

top: 17px;

left: 12px;

}

.chk_1:checked + label {

background:red;

}

</style>

</head>

<body>

<input type="checkbox" id="checkbox_a1" class="chk_1">

<label for="checkbox_a1"></label>

</body>

Input checkbox 添加样式背景的更多相关文章

  1. 自定义input[type="checkbox"]的样式

    对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...

  2. React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等

    修改样式更符合项目的需求特别是在 Input 和 Checkbox 等等一系列 试过很的方式都有问题, 比如直接在行内添加样式会无法传递到特定的层级 最好的办法是添加 id 可行 渲染部分代码 < ...

  3. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  4. 使用<label>标签修改input[type="checkbox"]的样式

    因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...

  5. css input checkbox和radio样式美化

    参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...

  6. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  7. input 选择框改变背景小技巧

    最近在项目中遇到一个问题,想要改变input选择框的背景,然而,令我没有想到的是,竟然无法直接改变背景的颜色 通常情况下:我们都可以通过改变元素的 background-color 的值来改变元素的背 ...

  8. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  9. 使用script创建标签添加属性值和添加样式

    <mark>使用script创建标签和给标签属性值以及样式的方法</mark><script> window.onload=function(){ var btn= ...

随机推荐

  1. [No00004A]为什么你看了很多书，却依然没有洞见

    摘要: 前几天有人在知乎上问:今天就回答下很多人问了很久的这个问题,并且解释一下如何构建系统化的知识体系.我想很多人看到这个问题,期待的答案是一个书单,可是我要告诉你这并没有什么卵用.我想大部分人都经 ...

  2. [No000033]码农网-如何锻炼出最牛程序员的编码套路

    最近,我大量阅读了Steve Yegge的文章.其中有一篇叫"Practicing Programming"(练习编程),写成于2005年,读后令我惊讶不已: 与你所相信的恰恰相反 ...

  3. NOIP提高组2010 关押罪犯

    题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示 ...

  4. javascript按回车键触发事件

    <form id="search-form" > <input type="text" onkeypress="getKey();r ...

  5. MongoDB集群架构及搭建

    MongoDB分布式集群 MongDB分布式集群能够对数据进行备份,提高数据安全性,以及提高集群提高读写服务的能力和数据存储能力.主要通过副本集(replica)对数据进行备份,通过分片(shardi ...

  6. IntelliJ IDEA 编译maven项目以及运行测试前编译项目

    Maven编译及命令行输出 右侧Maven Projects, 打开, 选取某个Project打开至Lifecycle/package 或其他任何一个lifecycle选项, 在上面右键Run Mav ...

  7. PAT 1011. A+B和C (15)

    给定区间[-231, 231]内的3个整数A.B和C,请判断A+B是否大于C. 输入格式: 输入第1行给出正整数T(<=10),是测试用例的个数.随后给出T组测试用例,每组占一行,顺序给出A.B ...

  8. Meet Python: little notes 3 - function

    Source: http://www.liaoxuefeng.com/ ♥ Function In python, name of a function could be assigned to a ...

  9. APMServ 支持.htaccess伪静态

    假如你的APMServ安装在X盘APMServ5.2.6目录的话请按以下步骤做. X:\APMServ5.2.6\Apache\conf\httpd.conf  文件找到你所在的虚拟目录修改以下这个地 ...

  10. Windows 8 开发系列汇总

    Windows 8 应用开发 Windows 8 应用开发 - 异步调用 Windows 8 应用开发 - 本地数据存储 Windows 8 应用开发 - 挂起与恢复 Windows 8 应用开发 - ...