css input checkbox复选框控件 样式美化的多种方案
checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果。
资源网站大全 https://55wd.com
方案一:纯css方法
单选按钮和复选按钮都有选中和未选中状态。要设置这两个按钮默认样式稍微复杂点。该文通过:checked选择器配合其他表情实现自定义样式。举例:使用:checked选择器模拟实现复选框样式。
<meta charset="utf-8">
<style type="text/css">
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
} .wrapper {
margin-bottom: 10px;
} .box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
} .box input {
opacity: ;
} .box span {
position: absolute;
top: -10px;
right: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
} input[type="checkbox"] + span {
opacity: ;
} input[type="checkbox"]:checked + span {
opacity: ;
}
</style> <form action="#">
<div class="wrapper">
<div class="box">
<input type="checkbox" checked="checked" id="username" /><span>√</span>
</div>
<label for="username">我是选中状态</label>
</div> <div class="wrapper">
<div class="box">
<input type="checkbox" id="userpwd" /><span>√</span>
</div>
<label for="userpwd">我是未选中状态</label>
</div>
</form>
这种方法有个问题:点选框时无法选中,必须点文字才能选中 。
效果如下:
方案二:配合js解决方法
原理:label和input外面套一层.custom-checkbox作为父元素相对定位。
input绝对定位于左上角,label也绝对定位于左上角,覆盖input的方块。通过给label设置padding-left和背景图来模拟未选中状态。选中时加一个.right类更改背景图片为选中状态的背景图。通过js点击事件,label被点击时在选中与未选中状态切换。
用到图片:
代码如下:
<meta charset="utf-8"/>
<style type="text/css">
.custom-checkbox{
border:1px solid red;
position:relative;
height:30px;
}
.custom-checkbox input{
position:absolute; }
.custom-checkbox label{
padding-left:20px;
position:absolute;
top:-1px;
left:;
background:url(images/bg-unchecked.png) no-repeat top 4px left 3px;
}
.custom-checkbox label.right{
background:url(images/bg-checked.png) no-repeat top 2px left 3px;
} </style>
<body>
<div class="custom-checkbox">
<input type="checkbox" id="test"/><label for="test">已阅读并同意相关服务条款</label>
</div> <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript"> $('.custom-checkbox label').click(function(){
if($(this).hasClass('right')){
$('.custom-checkbox label').removeClass("right");
}else{
$('.custom-checkbox label').addClass("right");
}
});
</script>
</body>
问题:点击频率过快,会双击选中文字,影响用户体验。
解决办法:
<label for="test" onselectstart="return false;" style="-moz-user-select:none;">已阅读并同意相关服务条款</label>
效果如下:
方案三:配合js简化版
2的方案用2次绝对定位有点麻烦,因为用了<input type="checkbox">的复选框,如果要求没那么复杂,简单用的<i>标签模拟一下复选框也一样可以实现效果。
html:
<label class="agree-label" onselectstart="return false;" style="-moz-user-select:none;">
<i class="cus-checked"></i>同意 <a href=":;" target="_blank">某某服务条款</a>
</label>
css:
.agree-label {
display: inline-block;
font-size: 18px;
} .agree-label i {
display: inline-block;
width: 21px;
height: 22px;
margin-bottom: -4px;
margin-right: 6px;
background: url(images/checkedbox.png) no-repeat;
} .agree-label i.cus-checked {
background-position: -22px;
}
js:
$('.agree-label').click(function() {
if ($('.agree-label i').hasClass('cus-checked')) {
$('.agree-label i').removeClass("cus-checked");
} else {
$('.agree-label i').addClass("cus-checked");
}
});
css input checkbox复选框控件 样式美化的多种方案的更多相关文章
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- css 设置 checkbox复选框控件的对勾√样式
效果 最终的样式,想要的效果: 我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...
- CheckBox复选框控件
CheckBox复选框控件 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建LinearLayout布局 2 ...
- Android控件之CheckBox(复选框控件)
一.有两种状态: 选中状态(true).未选中状态(false) 二.属性 android:id = "@+id/checkbox" android:layout_width=&q ...
- Java通过复选框控件数组实现添加多个复选框控件
编写程序,通过复选框控件数组事先选择用户爱好信息的复选框,在该程序中,要求界面中的复选框数量可以根据指定复选框名称的字符串数组的长度来自动调节. 思路如下: 创建JPanel面板对象: 使用JPane ...
- 纯CSS修改checkbox复选框样式
借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- Asp.net自定义单选复选框控件
将常用的jquery插件封装成控件也是个不错的选择 下面是效果的简单颜色,由于博客系统的限制没法完整演示最终效果,请下载示例查看 Asp.netWeb APIC#Javascript 1.新建类库 ...
随机推荐
- mysql基础之-mysql锁和事务(七)
0x01 MySQL锁: 执行操作时施加锁的模式 读锁:用户在读的时候施加的锁,为防止别人修改,但是用户可以读,还被称为共享锁 不会对其他用户进行阻塞 理解: ----->(这里的不阻塞,是可以 ...
- 解决intellij idea卡顿的方法
使用idea越用越卡,即使是16G内存也是卡,多开几个微服务卡死了!! 解决方案 参考网路资源整理如下几条 1. 卸载不需要用的插件 我是Java开发,对于一些默认安装的什么安卓的google的app ...
- [xDebug] php下的Debug的调试
基础知识 对于php来说,debug的话,有个东西叫xdebug,当然配置这个时候,特别在mac下出了很多坑,这里强烈推荐一个mac下类似phpstudy的东西,叫做MxSrvs,了解一下? Xdeb ...
- Ubuntu18.04下MySQL8.0和Navicat15的安装与使用
目录 一.MySQL8.0安装 二.Navicat安装并与MySQL连接 一.MySQL8.0安装 注意:若直接 sudo apt install mysql-server,你会发现安装后的版本是5. ...
- (四)MySQL条件查询(通配符、模糊查询)、排序查询、分组查询(单行、分组函数)
一.条件查询 1.含义:前面学的基础查询可以查询一个或多个字段,如果需要的数据仅仅是其中的某一行或多行就用到了条件查询. 2.语法:(序号表示语句执行顺序) SELECT 字段名 ③ FROM 表名 ...
- Install Centos7 on VirtualBox in mac
Step 1:准备虚拟机及镜像 下载合适的Virtual Box版本 官方下载链接:https://www.virtualbox.org/wiki/Downloads 这里选择的版本是:https:/ ...
- MySQL数据表中有自增长主键时如何插入数据
原文链接:https://blog.csdn.net/RuobaiMEN/article/details/79794199 MySQL数据库表中有自增主键ID,当用SQL插入语句中插入语句带有ID列值 ...
- kafka全部数据清空
kafka全部数据清空的步骤为: 停止每台机器上的kafka: 删除kafka存储目录(server.properties文件log.dirs配置,默认为“/tmp/kafka-logs”)全部top ...
- node实现文件属性批量修改(时间属性)
前言 在默认情况下,一个文件的创建时间和修改时间是系统自己设定的,我们不能修改该的.但我们有时为了某种特殊需要,为了不让别人一眼看出文件已经给修改了,我们又需要修改文件的创建时间和修改时间.那么如何修 ...
- jmeter的beanshell
[beanshell] 简单介绍beanshell,小型的java源代码解释器 运行下beanshell [常用命令] print() 输出内容到命令行中 (1)也可以在beanshell中自定义 [ ...