自定义checkbox/radio
一. label标签
1. 概念:
HTML <label>
元素表示用户界面中项目的标题。
它通常关联一个控件,或者是将控件放置在label
元素内,或者是用作其属性。这样的控制称作labe
l元素的labeled control
2. 用法:
- 用法1:
<label>Click me <input type="text" id="User" name="Name" /></label>
- 用法2:
<label for="User">Click me</label>
<input type="text" id="User" name="Name" />
二. background-position属性
1. 概念:
background-position属性用来指定背景图片的初始位置;这个初始位置相对于background-origin定义的背景位置图层来说的
2. 用法:
background-position:[position-x],[position-y]
如果只有一个值被指定,则这个值就会默认设置背景图片位置中的水平方向,与此同时垂直方向的默认值被设置成50%。在关键词、百分比和数值混合指定的情况下,关键词 left 和 right 只能被指定水平方向的位置(第一个值)同时 top 和 bottom 只能被指定指定为垂直方向的值(第二个值)。同样,负数值是允许指定的。
三. 伪类和伪元素
1.概念:
伪类:存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。
伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。
常用伪类:
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:checked 向选中的控件元素添加样式
伪元素:伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码);
注意:css3为了区分伪类和伪元素,规定伪类前面有一个冒号,伪元素前面有两个冒号
常用伪元素
::before 作为作用元素的第一个子节点插入dom中
::after 作为作用元素的最后一个子节点插入dom中
2.区别与联系
- 联系:都是通过选择器为元素添加样式
- 区别:伪元素会创建一个元素,但不是真正的Html元素,伪类相当于为一个元素创建一个class样式
四、自定义控件的原理
隐藏原生input标签,使用label,并且给之加样式来实现自定义控件
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义checkbox,radio样式</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id='wrap'>
<h2>伪元素实现:</h2>
<div class="checkbox">
<input type="checkbox" name="" id="checkBox" class="checkBox">
<label for="checkBox"></label>
</div>
<div class="radio">
<input type="radio" name="sex" id="radioBox" class="radios">
<label for="radioBox"></label>
<input type="radio" name="sex" id="radioBox1" class="radios">
<label for="radioBox1"></label>
</div>
<h2>雪碧图实现:</h2>
<div class="checkbox">
<input type="checkbox" name="" id="checkBox_sprit" class="checkBox_sprit">
<label for="checkBox_sprit"></label>
</div>
<div class="radio">
<input type="radio" name="sex1" id="radioBox_sprit" class=" radioBox_sprit">
<label for="radioBox_sprit"></label>
<input type="radio" name="sex1" id="radioBox1_sprit" class=" radioBox_sprit">
<label for="radioBox1_sprit"></label>
</div>
</div>
</body>
</html>
- 伪元素方法实现
使用:checked
伪类和::after
伪元素,当控件选中时添加伪元素到label
标签中:
css:
.checkbox{
margin-bottom: 30px;
font-weight: 700;
}
.checkBox+label,.radios+label{
width:16px;
height: 16px;
border:1px solid #d9d9d9;
display: -webkit-flex;
display:flex;
}
.checkBox:checked+label,.radios:checked+label{
border:1px solid #d73d32;
font-weight: 700;
}
.checkBox:checked+label::after,.radios:checked+label::after{
margin: auto;
content: '2714';
color: red;
width:8px;
height:8px;
line-height: 8px;
text-align: center;
font-size: 12px;
}
input{
margin:0;
display: none;
}
/* radio */
.radio{
display: -webkit-flex;
display: flex;
width: 50px;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.radios+label{
border-radius: 50%;
}
.radios:checked+label::after{
border-radius: 50%;
width:8px;
height:8px;
line-height: 8px;
content: ' ';
background: #d73d32;
}
- 雪碧图实现方法:
给label加一个背景图片,并通过设置选中状态时的background-position
属性
css:
.checkBox_sprit+label,.radioBox_sprit+label{
width: 16px;
height:16px;
border:none;
display: inline-block;
background:url('bg.png') no-repeat;
}
.checkBox_sprit+label{
background-position:-25px -32px;
}
.radioBox_sprit+label{
background-position: -24px -10px;
}
.checkBox_sprit:checked+label{
background-position: -60px -32px;
}
.radioBox_sprit:checked+label{
background-position: -59px -10px;
}
五. css雪碧图和css伪元素两种方法的比较
- 使用伪元素可以不用图片,这样就减少了http的收发次数,提高了网络性能。
- 使用css雪碧图,可以使还原度更加精确,代码量减少。
自定义checkbox/radio的更多相关文章
- 自定义checkbox,radio样式
input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 15px; ...
- html自定义checkbox、radio、select —— select篇
上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...
- html自定义checkbox、radio、select —— checkbox、radio篇
前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...
- 自定义checkbox, radio样式
17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- 自定义checkbox, radio样式总结
任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现 ...
- jquery validate自定义checkbox验证规则和样式
参考:http://blog.csdn.net/xh16319/article/details/9987847 自定义checkbox验证,“检查checkbox是否选中” jQuery.valida ...
- 自定义checkbox样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 自定义 checkbox 样式
前言:最近在做一个网站,为了统一风格,需要自定义checkbox的样式.所以花了点时间参考了 研究了一下.感觉上面的方法略微麻烦.所以自己重新写了下面的代码,欢迎大家指教.同时,感谢w3cplus提供 ...
随机推荐
- 谈谈MySQL数据表的类型(转)
谈谈MySQL数据表的类型 通常意义上,数据库也就是数据的集合,具体到计算机上数据库可以是存储器上一些文件的集合或者一些内存数据的集合. 我们通常说的MySql数据库,sql server数据库等等其 ...
- iOS 界面布局,设置约束
1. 设置控件的宽度是父视图的宽度的1/2 在控件上按住ctrl,按住鼠标左键,拖动到父视图,这时出来一个选项,选中aspect 在Multiplier中填上1:2 即可,其它的比例也是这样 2. 设 ...
- Myeclipse快捷键集合
Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...
- easyui datagrid行中点击a标签链接,行被选中,但是获取不到对应的参数
easyui中使用比较多的就是datagrid了,表格中添加连接,点击跳转,为比较常用的方式;往往在点及标签后调用getSeleted方法会失效; 一.初始代码: {field: 'id',title ...
- js dorado
1.dorado http://bsdn.org/projects/dorado7/deploy/sample-center/com.bstek.dorado.sample.Main.d#40350
- iOS NSTimer
示例: //创建 scrollTimer =[NSTimer scheduledTimerWithTimeInterval:interval target:self selector:@selecto ...
- BNU Online Judge-34777-Magical GCD
题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=34777 题意 如样例 输入 1530 60 20 20 20 输出 80 如 30 和 ...
- Windows 7 下 PHP 开发环境搭建(手动)
Windows 7 下 PHP 开发环境搭建 1.说明 做开发的都知道一句话,就是“站在巨人的肩膀上”.确实现在打开浏览器随便一搜很多一键安装PHP环境的软件,比如wamp.xampp.AppServ ...
- Spring 使用context:annotation-config的设置
Spring 使用context:annotation-config的设置: 还是需要声明Bean的,并且还可能自己定义Annotation: xml: <?xml version=" ...
- 通过浏览器navigator判断浏览器版本或者手机类型&&判断微信访问
javascript 的navigator属性,不常用,但是用处也不少,主要用处是在做浏览器兼容的问题的时候,现在有的网站已经不兼容IE6,用户假如用IE6浏览网页的话,会提示浏览器升级等信息.或者判 ...