CSS 实现:checkbox
<div class="wrap">
<label>性别:</label>
<div class="cb-wrap"> <!-- 整体为一个checkbox,用div包裹 -->
<input type="radio" name="sex1" value="男"></input> <!-- 需要隐藏,置于最上层 -->
<span class="cb-icon"></span> <!-- 加伪元素,模拟checkbox样式 -->
<span class="cb-label">男</span> <!-- 当选中时,字体颜色也得改变 -->
</div>
<div class="cb-wrap">
<input type="radio" name="sex1" value="女"></input>
<span class="cb-icon"></span>
<span class="cb-label">女</span>
</div>
</div>
css实现:
.wrap {
label {
display: inline-block;
width: 50px;
text-align: right;
margin-right: 15px;
}
}
.cb-wrap {
display: inline-block; // 将div元素设置成行内元素,不然尽管设置的宽度较小,还是会占据一行
width: 50px;
height: 30px;
margin-right: 15px;
line-height: 30px;
position: relative; // 设置定位
input {
opacity: 0; // 设置透明度为0
width: 100%; // 设置宽度为一个checkbox(.cb-wrap)的宽度
height: 100%;
z-index: 2; // 置于最上层
position: absolute; // 相对于.cb-wrap定位
top: 0;
left: 0;
}
// 用伪类:checked,实现checkbox选中状态时改变其它元素样式
input:checked + span { // 用“相邻兄弟选择器”,改变模拟checkbox的颜色
background: red;
}
input:checked ~ .cb-label { // 用“同级元素通用选择器”,改变字体的颜色
color: red;
}
.cb-icon { // 实现模拟checkbox
display: inline-block; // span设宽,必须得设置成块级元素!
width: 16px;
height: 16px;
border: 1px solid #ddd;
border-radius: 8px;
position: relative; // 相对于自身原来的位置定位,使其与字体对齐
top: 3px;
&:after { // 伪元素实现对勾(√)部分
content: "";
display: inline-block;
width: 9px;
height: 6px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(-45deg);
position: absolute;
top: 3px;
right: 3px;
}
}
}
(示例2相对实例1较为简单,不需要用为元素实现模拟的checkbox,也少了一个span
元素,区别在于cb-icon
的实现不同)
<div class="wrap">
<label>性别:</label>
<div class="cb-wrap">
<input type="radio" name="sex2" value="男"></input>
<span class="cb-icon">男</span>
</div>
<div class="cb-wrap">
<input type="radio" name="sex2" value="女"></input>
<span class="cb-icon">女</span>
</div>
</div>
css实现:
.cb-wrap {
display: inline-block;
width: 50px;
height: 30px;
margin-right: 15px;
line-height: 30px;
position: relative;
input {
opacity: 0;
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
input:checked + span {
background: orange;
color: #fff;
}
.cb-icon {
display: inline-block;
width: 50px;
height: 25px;
border: 1px solid #ddd;
text-align: center;
line-height: 25px;
}
}
CSS 实现:checkbox的更多相关文章
- 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端
最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...
- 纯css实现checkbox开关切换按钮
我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...
- ZH奶酪:利用CSS将checkbox选项放大
在Hybrid App开发过程中,html中默认的checkbox选项在手机屏幕上显得比较小,app不能像web page那样放大缩小,所以要通过CSS将checkbox选项放大: 例如HTML代码: ...
- css input checkbox和radio样式美化
参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- CSS控制checkbox样式
原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...
- 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- css 设置 checkbox复选框控件的对勾√样式
效果 最终的样式,想要的效果: 我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...
- 利用纯CSS美化checkbox和radio和滑动按钮的实现
W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...
随机推荐
- PHP超级全局变量——Session 变量
PHP session 变量用于存储有关用户会话的信息,或更改用户会话的设置.Session 变量保存的信息是单一用户的,并且可供应用程序中的所有页面使用. PHP Session 变量 当您运行一个 ...
- List<object> isEmpy contail 的判断
- visual studio 插件开发
插件的定义 所谓插件,就是根据平台接口开发的第三方程序.第一次听到这个名词很是不了解,听了解释也不是很明白,那我们来举个例子,比如说一辆房车,现在里面只有基本的一些设施,但是你现在想在顶部有一个晒太阳 ...
- 快速将excel数据保存到Oracle数据库中【转】
我们在工作中,也许会碰到以下情况,客户或者同事发来需要调查的数据,并不是dmp文件,而是excel文件,此时通常是一张表,少量几条记录.最近我恰好碰到了这种情况,所以做了些调查,不敢藏私,拿出来跟大家 ...
- vim命令/压缩和解压命令
gzip命令 -d 解压 -# 1 为最快 但容量问题 . 9为最好 .6为默认 gzip install.log 比较好理解,windows里面类似的,记住zip 和unzip是可以目录或者文件解 ...
- MongoDb系列
这个系列主要总结学习MongoDb过程中的一些经验. 简单介绍及环境搭建 常用命令 C#驱动及应用 管理工具MongoVUE使用
- RM报表的选项 注册表位置
HKCU\Software\WHF SoftWare\Report Machine\RMReport\Form\RMDesignerForm\ 设计器-工具-选项的设置 HKCU\Software\W ...
- Rhel6-keepalived+lvs配置文档
系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 192.168.122.119 server19.example.com 192.168.12 ...
- CSS Hack及常用的技巧
何谓CSS Hack? 不同的浏览器,比如Internet Explorer 6.Internet Explorer 7. Mozilla Firefox对CSS的解析认识不一样,因此会导致生成的页面 ...
- Spring学习笔记之Bean的实例化
一.bean的实例化方法有3种, 1.构造器实例化 2.静态工厂方法实例化 3.实例工厂方法实例化 二.用构造器来实例化 <bean id="ShunDao" class=& ...