<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. AC日记——单词替换 1.7 21

    21:单词替换 总时间限制:  1000ms 内存限制:  65536kB 描述 输入一个字符串,以回车结束(字符串长度<=100).该字符串由若干个单词组成,单词之间用一个空格隔开,所有单词区 ...

  2. C++ create_task详解

    IAsyncOperation<T>^ asyncOperation = create_async( []() { return create_task(FirstAsync(...)) ...

  3. Java深入 - Java 内存分配和回收机制

    Java的GC机制是自动进行的,和c语言有些区别需要程序员自己保证内存的使用和回收. Java的内存分配和回收也主要在Java的堆上进行的,Java的堆中存储了大量的对象实例,所以Java的堆也叫GC ...

  4. APIO2013 tasksauthor

    喜闻乐见的提答题,这道题还是蛮有趣的 数据结构题写得心塞,来一道提答意思意思 如果喜欢这类题的话还可以去做做uoj83. 这题是给出了两个问题,一个最短路,一个无向图染色问题. Data 1 Floy ...

  5. rpc使用举例

    #server.py from SimpleXMLRPCServer import SimpleXMLRPCServer def add(x,y): return x+y server=SimpleX ...

  6. javascript中获取屏幕尺寸

    Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小 屏幕的有效宽:window.screen.availHeight屏幕的有效高:window.screen.availWid ...

  7. Oracle 创建 split 和 splitstr 函数

    Sql语句最好依次执行创建 /************************************** * name:        split * author:      sean zhang ...

  8. U-boot与linux的关系

    基本上没有啥关系,U-boot的话你也知道,说白了就像是Dos工具箱,本身算是个精简的Linux系统了,主要是负责硬件的初始化和引导,本身带有一些工具,作为引导程序,常作为嵌入式设备的引导.当真正的系 ...

  9. lecture3-线性神经元和算法

    Hinton第三课 这节课主要是介绍NN的输出端常用的神经元,然后重点是说明怎么使用BP来计算偏导数,在Hinton这一课中,他提供了他1986年参与写的<并行分布处理>一书的第8章,49 ...

  10. lecture12-玻尔兹曼机和受限玻尔兹曼机

    这是Hinton的第12课,结合前一课可以知道RBM是来自BM,而BM是来自Hopfield的,因为水平有限,是直译的,虽然有时候会看不懂,但是好歹不会曲解原来的本意,看的话:1.先看ppt:2.通读 ...