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 ...
随机推荐
- 模拟栈的回溯,完全二叉树搜索,(ZOJ1004)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1004 解题报告: ①方法:完全二叉树的搜索方式,回溯法. ②代码 ...
- hihocoder 后缀自动机四·重复旋律6
题目 对于\(k\in[1,n]\)求出长度为\(k\)的子串出现次数最多的出现了多少次 我直到现在才理解后缀自动机上的子树和是什么意思 非常显然的一点是 \[endpos(link(u))⊇endp ...
- 设置IE浏览器的默认主页
实现效果: 知识运用: RegistryKey类的GetValue方法 public Object GetValue (string name , Object defaultValue) name ...
- 2017.9.2Java中的自定义类型的定义及使用&&自定义类的内存图
今日内容介绍 1.自定义类型的定义及使用 2.自定义类的内存图 3.ArrayList集合的基本功能 4.随机点名器案例及库存案例代码优化 01引用数据类型_类 * A: 数据类型 * a: java ...
- 【转】JS gzip加密字符串并base64输出
http://blog.csdn.net/zunwei/article/details/49886115 最近开发中遇到一些问题,关于js怎么给一个字符串进行字节流加密.下面就详细说下做法. 首先引入 ...
- 用keytool制作证书并在tomcat配置https服务(四)
用keytool制作证书并在tomcat配置https服务(一) 用keytool制作证书并在tomcat配置https服务(二) 用keytool制作证书并在tomcat配置https服务(三) 上 ...
- checkbox 全选
<template> <div class="hello"> <table> <tr> <th><input ty ...
- 【SQL】Oracle和Mysql的分页、重复数据查询(limit、rownum、rowid)
上周三面试题有两道涉及Oracle的分页查询,没有意外地凉了,现在总结一下. · Mysql mysql的分页可以直接使用关键字limit,句子写起来比较方便. 语法: ① limit m,n -- ...
- spring入门(八) spring mvc设置默认首页
1.web.xml配置如下 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3// ...
- udt通信java再次升级1.1版
以前完成了udt的java代码测试,功能基本完成,近几天有时间重新梳理了下源码: 对原通信的关闭统一了方法,close定位过时,由shutdown与shutdownNow代替. 将一些主要方法添加了注 ...