bootstrap重新设计checkbox样式
文章采集于: https://www.cnblogs.com/GumpYan/p/7845445.html#undefined
在原文基础上修改了勾勾的内容,直接采用bootstrap字体库。修改了横向布局的内间距,让两项之间有距离好看一点点。没了。代码看下面。
1、将checkbox原来的样式改成新的样式
checkbox原来的样式
checkbox新的样式
2.思路:
(1)首先,将checkbox的id与label的for关联起来
(2)将原来的checkbox用opacity:0隐藏起来,用新设计的checkbox覆盖在原来的checkbox的位置
(3)将新的checkbox与原来的checkbox的checked事件关联起来
(4)将remember me的字体样式改变一下,同时加上一个样式:鼠标移动到字体上变成手形
源码:
html文件
<div class="col-sm-8 ">
<div class="checkbox-custom checkbox-default">
<input type="checkbox" id="RememberMe">
<label for="RememberMe">Remember Me</label>
</div>
</div>
CSS
.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;
}
bootstrap重新设计checkbox样式的更多相关文章
- bootstrap重新设计按钮样式
1.将btn的样式换成以下的样式 2.思路: (1)将原来的btn样式设置color:#FFF,同时text-shadow设置,这样原来的btn样式就会变淡了,后面再加上新的样式就可以覆盖掉 注意:要 ...
- bootstrap table 自定义checkbox样式
//css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- [bootstrap] 基本css样式和组件
一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...
- bootstrap之css样式
一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- bootstrap全局css样式
以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2
1.表格 <div class="container"> <table class="table "> <thead> &l ...
- Bootstrap基本CSS样式
一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...
随机推荐
- PHP使用memcache长连接作为RPC客户端需要注意的地方
memcache扩展版本 3.0.8 一. retry_interval $retry_interval 某个rpc服务器端失败后故障转移的时间,retry_interval的时间内,该节点会被一直标 ...
- maven项目 servlet jar包冲突
Failed to process JAR found at URL for ServletContainerInitializers for context with name [{1}] 启动报 ...
- jdbc连接各种数据库字符串
oracle driverClass:oracle.jdbc.driver.OracleDriver url:jdbc:oracle:thin:@127.0.0.1:1521:dbname mysql ...
- Python—面向对象04 绑定方法
坚持把梳理的知识都给记下来....... 嗯哼哼 1.绑定方法与非绑定方法 在类内部定义的函数,分为两大类: 绑定到类的方法:用classmethod装饰器装饰的方法. 为类量身定制 类.boud_m ...
- C#中对于float,double,decimal的误解(转载)
浮点型 Name CTS Type Description Significant Figures Range (approximate) float System.Single 32-bit sin ...
- input上传图片并显示
html: <div id="click"><img> </div><!--照片预览的div --> <div class=& ...
- Mysql jar包
密码cngb https://pan.baidu.com/share/init?surl=bSGA6T-LTwjx-qaNAiipCA
- 每天一个Linux命令(6):rmdir命令
rmdir命令用来删除空目录 注意:子目录被删除之前应该是空目录.就是说,该目录中的所有文件必须用rm命令全部,另外,当前工作目录必须在被删除目录之上,不能是被删除目录本身,也不能是被删除目录的子目录 ...
- the “inner class” idiom
有些时候我们需要upcast为多种类型,这种情况下除了可以使用multiply inherits还可以inner class. 以下为例子: //: C10:InnerClassIdiom.cpp / ...
- 理解 ES6 Generator-next()方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...