//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样式的更多相关文章

  1. Django:bootstrap table自定义查询实现

    参考:https://jalena.bcsytv.com/archives/tag/bootstrap 背景: bootstrap table在客户端分页方式下,自带有简易的搜索功能,但是功能太单一, ...

  2. WPF 自定义CheckBox样式

    自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...

  3. 自定义checkbox样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Android之自定义checkbox样式

    大部分情况下,我们在UI中并不采用Android自带的checkbox复选框样式,这时候就需要我们自定义自己的checkbox. 首先找两张checkbox背景图片,比如下图样子的: 然后在drawa ...

  5. 自定义 checkbox 样式

    前言:最近在做一个网站,为了统一风格,需要自定义checkbox的样式.所以花了点时间参考了 研究了一下.感觉上面的方法略微麻烦.所以自己重新写了下面的代码,欢迎大家指教.同时,感谢w3cplus提供 ...

  6. [转]Android中自定义checkbox样式

    android中自定义checkbox的图片和大小   其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=" ...

  7. 如何去掉bootstrap table中表格样式中横线竖线

    修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...

  8. 【CSS】自定义checkbox样式

    修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...

  9. 利用伪元素before实现自定义checkbox样式

     原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...

随机推荐

  1. 在pom包中添加spring-boot-starter-test包引用

    有很多网友会时不时的问我,spring boot项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下spring boot 如何开发.调试.打包到最后的投产上线. 开发阶段 单元 ...

  2. AtCoder Beginner Contest 121 题解

    题目链接:https://atcoder.jp/contests/abc121 A White Cells 分析:题目数据规模很小,直接暴力修改都可以.或者可以推出公式. 代码: #include & ...

  3. springBoot2.0 配置 mybatis+mybatisPlus+redis

    一.Idea新建springBoot项目 next到完成,然后修改使用自己的maven 等待下载包 二.pom.xml文件 <?xml version="1.0" encod ...

  4. 洛谷 P1536 村村通(并查集)

    嗯... 题目链接:https://www.luogu.org/problemnew/show/P1536 思路: 这道题可以看出是并查集的思想,然后用一个while嵌套一下,输入一条路的两个端点,就 ...

  5. BZOJ 4165 矩阵 堆

    先把每个长为$mina$,宽为$minb$的矩阵扔到堆里,然后由于矩阵中的数都是正的,所以我们每取出来一个矩形,,就把他向四个方向扩张一行,再把这新的且更大的四个矩形扔到堆里.注意判重,于是我比较懒用 ...

  6. ThrowableUtil

    public class ThrowableUtil { public static Throwable getDeepestCause(final Throwable throwable) { in ...

  7. 页面上AJAX调用数据

    <div class="section page9" data-page='9'> <div class="global-section-wrp med ...

  8. 牛客网Java刷题知识点之插入排序(直接插入排序和希尔排序)、选择排序(直接选择排序和堆排序)、冒泡排序、快速排序、归并排序和基数排序(博主推荐)

    不多说,直接上干货! 插入排序包括直接插入排序.希尔排序. 1.直接插入排序: 如何写成代码: 首先设定插入次数,即循环次数,for(int i=1;i<length;i++),1个数的那次不用 ...

  9. GraphQL实战经验和性能问题的解决方案

    在现在的公司使用GraphQL有一段时间了. 现公司从创立之后的很长一段时间内是纯PHP的技术栈,前端.后端都在PHP代码中糅合在一起.新功能越加越多,页面越来越复杂之后,那些混在在PHP代码中的HT ...

  10. volatile底层原理详解

    今天我们聊聊volatile底层原理: Java语言规范对于volatile定义如下: Java编程语言允许线程访问共享变量,为了确保共享变量能够被准确和一致性地更新,线程应该确保通过排它锁单独获得这 ...