bootstrap table 自定义checkbox样式
//css
<style>
.checkbox-custom {
position: relative;
padding: 0 15px 0 25px;
margin-bottom: 7px;
margin-top:;
display: inline-block;
}
/*
将初始的checkbox的样式改变
*/
.checkbox-custom input[type="checkbox"] {
opacity:;/*将初始的checkbox隐藏起来*/
position: absolute;
cursor: pointer;
z-index:;
margin: -6px 0 0 0;
top: 50%;
left: 3px;
}
/*
设计新的checkbox,位置
*/
.checkbox-custom label:before {
content: '';
position: absolute;
top: 50%;
left:;
margin-top: -9px;
width: 19px;
height: 18px;
display: inline-block;
border-radius: 2px;
border: 1px solid #bbb;
background: #fff;
}
/*
点击初始的checkbox,将新的checkbox关联起来
*/
.checkbox-custom input[type="checkbox"]:checked +label:after {
position: absolute;
display: inline-block;
font-family: 'Glyphicons Halflings';
content: "\e013";
top: 42%;
left: 3px;
margin-top: -5px;
font-size: 11px;
line-height:;
width: 16px;
height: 16px;
color: #333;
}
.checkbox-custom label {
cursor: pointer;
line-height: 1.2;
font-weight: normal;/*改变了rememberme的字体*/
margin-bottom:;
text-align: left;
}
</style>
//js
//在表格体渲染完成,并在 DOM 中可见后触发 替换checkbox样式
$("#bootstrap-table").on('post-body.bs.table',function(data){
$(this).find("input:checkbox").each(function (i) {
var $check = $(this);
if ($check.attr("id") && $check.next("label")) {
return;
}
$check.next().remove();
var name = $check.attr("name");
var id = name + "-" + i;
var $label = $('<label for="'+ id +'"></label>');
$check.attr("id", id).parent().addClass("checkbox-custom").append($label);
});
});
bootstrap table 自定义checkbox样式的更多相关文章
- Django:bootstrap table自定义查询实现
参考:https://jalena.bcsytv.com/archives/tag/bootstrap 背景: bootstrap table在客户端分页方式下,自带有简易的搜索功能,但是功能太单一, ...
- WPF 自定义CheckBox样式
自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...
- 自定义checkbox样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Android之自定义checkbox样式
大部分情况下,我们在UI中并不采用Android自带的checkbox复选框样式,这时候就需要我们自定义自己的checkbox. 首先找两张checkbox背景图片,比如下图样子的: 然后在drawa ...
- 自定义 checkbox 样式
前言:最近在做一个网站,为了统一风格,需要自定义checkbox的样式.所以花了点时间参考了 研究了一下.感觉上面的方法略微麻烦.所以自己重新写了下面的代码,欢迎大家指教.同时,感谢w3cplus提供 ...
- [转]Android中自定义checkbox样式
android中自定义checkbox的图片和大小 其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=" ...
- 如何去掉bootstrap table中表格样式中横线竖线
修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...
- 【CSS】自定义checkbox样式
修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
- 利用伪元素before实现自定义checkbox样式
原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...
随机推荐
- Filter的使用及其生命周期介绍
一.Filter 1. Filter简介 > Filter翻译为中文是过滤器的意思. > Filter是JavaWeb的三大web组件之一:Servlet.Filter.Listener ...
- 【Kafka】《Kafka权威指南》入门
发布与订阅消息系统 在正式讨论Apache Kafka (以下简称Kafka)之前,先来了解发布与订阅消息系统的概念, 并认识这个系统的重要性.数据(消息)的发送者(发布者)不会直接把消息发送给接收 ...
- spring boot 使用WebSocket与前端进行byte字节数组交互
一.装逼前先热热身 无论是比较传统的 web项目 还是近几年流行的前后端分离,后端只独立提供数据交互接口服务的项目,都避免不了数据之间交互格式的选择. 从很早之前的 xml 格式 到现在最火热的jso ...
- rsyslog服务器同步其他服务器上面应用日志(如mysql审计日志 、nginx日志)
**环境说明**系统:ubuntu 14.04 (CentOS可以参考http://www.cnblogs.com/hanyifeng/p/5463338.html) rsyslog版本 :8.16. ...
- 练习三十八:矩阵for循环应用
习题如下: 求一个3*3矩阵对角线元素之和 利用for循环控制输出二维数组,再将a[i][j]累加后输出 a = [] sum1 = 0.0 for i in range(3): a.append([ ...
- 惠普台式机UEFI BIOS设置U盘启动
开机按F9进入选中安装u盘启动软件的u盘,即可进入u盘启动选项,将于U盘安装系统操作一致 如:F9未找到U盘,可进行如下操作 1.开机时点击F10键进入BIOS更改选项: 更改 Advanced-- ...
- jquery——尺寸
1. 获取和设置元素的尺寸 2. 获取元素相对页面的绝对位置:offset() 这种方式增加的盒子不会对之前的结构产生影响 demo: <!DOCTYPE html> <html l ...
- Java文件与io——缓冲流
对文件或其它目标频繁的读写操作,效率低,性能差. 使用缓冲流的好处,能够更高效的读写信息,原理是将数据先缓冲起来,然后一起写入或者读取出来. BufferedInputStream:为另一个输入流添加 ...
- 《从0到1学习Flink》—— Flink 写入数据到 ElasticSearch
前言 前面 FLink 的文章中我们已经介绍了说 Flink 已经有很多自带的 Connector. 1.<从0到1学习Flink>-- Data Source 介绍 2.<从0到1 ...
- 了解【Docker】从这里开始
一.环境配置的难题 软件开发最大的难题之一就是环境配置的问题.现在用户环境纷乱复杂,并且由于开源社区的进一步推广和许多开源项目不停地迭代更新,项目可能会有越来越多的依赖以及越来越难管理的依赖版本,如何 ...