<style type="text/css">
input[type=checkbox] {
  visibility: hidden;
}

.slide_check_box {
  float: left;
  width: 170px;
  height: 35px;
  background: #45aeea;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 50px;
  position: relative;
}

.slide_check_box:before {
  content: '是';
  position: absolute;
  top: 7px;
  left: 18px;
  height: 2px;
  color: #fff;
  font-size: 12px;
}

.slide_check_box:after {
  content: '否';
  position: absolute;
  top: 7px;
  left: 140px;
  height: 2px;
  color: #fff;
  font-size: 12px;
}

.slide_check_box label {
  display: block;
  width: 120px;
  height: 22px;
  border-radius: 50px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
  position: absolute;
  top: 7px;
  z-index: 1;
  left: 10px;
  background: #ddd;
  text-align: center;
  line-height: 22px;
}

.slide_check_box input[type=checkbox]:checked+label {
  left: 35px;
  background: #26ca28;
}
</style>

<form:checkboxes items="${cooperateList}" path="projectIds" itemLabel="projectName" itemValue="id" element="div class='slide_check_box'"/>

别样的checkbox的更多相关文章

  1. C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  2. WPF CheckBox 样式

    <Style x:Key="FocusVisual"> <Setter Property="Control.Template"> < ...

  3. 计算Div标签内Checkbox个数或已被disabled的个数

    先看下面的html: 计算div内的checkbox个数:$('#divmod input[type="checkbox"]').length 计算div内checkbox被dis ...

  4. 前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

    前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...

  5. Razor语法中绑定一个值给checkbox

    在ASP.NET MVC开发中,需要绑定一个值给checkbox标签,如下面写法,它们运行时是没有问题,照样能跑. 看看上面的语法,在绑定时,它却出现绿浪线.提不绑定的值is not a valid ...

  6. Checkbox 模板和样式

    <Style TargetType="{x:Type CheckBox}"> <Setter Property="FontFamily" Va ...

  7. RadioButton与CheckBox

    笔者长期从事于数据库的开发,算了,不提当年了,因为一直用的是小语种(PowerBuilder),还是来说说这两个最常见的控件吧! RadioButton(单选)和CheckBox(多选) 先来看看继承 ...

  8. Listview的Item中有CheckBox、Button等的焦点处理

    ListView的item布局中有CheckBox.Button等会获取焦点的控件会抢走焦点,造成ListView的item点击事件相应不了. 解决方法:控件设置 android:clickable= ...

  9. 实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能

    度娘了很多帖子,只说三种状态要用图片替换来做,但没找到有用的例子,被逼自己写了一个 三方控件肯定是很多的,如jstree,可以直接用 由于公司的UDS限制,不能上传图片,只能文字说明了. 就是要在gr ...

随机推荐

  1. 第一个Sprint冲刺第二天

    讨论成员:邵家文.朱浩龙.陈俊金.李新 讨论地点:宿舍 讨论内容:安卓开发技术,与后续需要加强的内容 计时功能完成度:刚开始讨论实现的技术

  2. Java NIO UDP DEMO

    今天有人问我Netty的UDP怎么使用,我自己尝试的去写一个Demo,在网上搜索了一下,关于Netty的UDP实现还是很少的,所以,今天写下这篇文章用来记录今天的一个简单Demo实现 不使用Netty ...

  3. Bandicam视频录制技巧总结+小丸工具箱压缩视频解决视频体积问题

    1.视频录制. 录制质量建议选择100,保证原文件的质量才能更好地保证渲染转码后输出视频的质量.音效这里就一个关键点,就是编码器默认的MPEG-1 L2,会导致会声会影渲染输出出错,程序强行关闭,Ve ...

  4. 文件系统层次标准FHS的详细介绍

    Filesystem Hierarchy Standard (文件系统层次标准,FHS)标准依据文件系统使用的频繁与否与是否允讲使用者随意更动, 而将目录定义成四种交互作用的形态,具体如下: 可分享的 ...

  5. 触摸精灵lua脚本实现微信群加好友功能

    --此脚本针对iPhone5/5s --目前只实现一个屏幕微信群好友的添加,如果想添加更多好友, --需要划屏操作,执行划屏操作时建议循环滑动 function main() --获取屏幕的分辨率 w ...

  6. 深度学习研究理解5:Visualizing and Understanding Convolutional Networks(转)

    Visualizing and understandingConvolutional Networks 本文是Matthew D.Zeiler 和Rob Fergus于(纽约大学)13年撰写的论文,主 ...

  7. Fragment中调用Activity的UI

    1:Fragment内定义一个接口,或外部定义一个接口, 2:Fragment定义一个接口对象的属性 3:Activity实现这个接口 4:Fragment的onAttach方法中强转Activity ...

  8. js/jsp清空表单2种方法

    js方式清空表单数据的两种方式 方法1:遍历页面元素 /* 清空FORM表单内容  id:表单ID*/  function ClearForm(id) {     var objId = docume ...

  9. HDU 1087 Super Jumping! Jumping! Jumping

    HDU 1087 题目大意:给定一个序列,只能走比当前位置大的位置,不可回头,求能得到的和的最大值.(其实就是求最大上升(可不连续)子序列和) 解题思路:可以定义状态dp[i]表示以a[i]为结尾的上 ...

  10. typedef 和 define的区别

    类型取别名,还可以定义常量.变量.编译开关 都知道两个在某些情况下是相同的 但是define是在预编译时就会处理掉,进行简单的宏替换,不管正不正确都替换掉,末尾没有分号,有分号连分号也一起替换了. 而 ...