文章采集于: 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文件

  1. <div class="col-sm-8 ">
  2. <div class="checkbox-custom checkbox-default">
  3. <input type="checkbox" id="RememberMe">
  4. <label for="RememberMe">Remember Me</label>
  5. </div>
  6. </div>

CSS

  1. .checkbox-custom {
  2. position: relative;
  3. padding: 0 15px 0 25px;
  4. margin-bottom: 7px;
  5. margin-top:;
  6. display: inline-block;
  7. }
  8. /*
  9. 将初始的checkbox的样式改变
  10. */
  11. .checkbox-custom input[type="checkbox"] {
  12. opacity:;/*将初始的checkbox隐藏起来*/
  13. position: absolute;
  14. cursor: pointer;
  15. z-index:;
  16. margin: -6px 0 0 0;
  17. top: 50%;
  18. left: 3px;
  19. }
  20. /*
  21. 设计新的checkbox,位置
  22. */
  23. .checkbox-custom label:before {
  24. content: '';
  25. position: absolute;
  26. top: 50%;
  27. left:;
  28. margin-top: -9px;
  29. width: 19px;
  30. height: 18px;
  31. display: inline-block;
  32. border-radius: 2px;
  33. border: 1px solid #bbb;
  34. background: #fff;
  35. }
  36. /*
  37. 点击初始的checkbox,将新的checkbox关联起来
  38. */
  39. .checkbox-custom input[type="checkbox"]:checked +label:after {
  40. position: absolute;
  41. display: inline-block;
  42. font-family: 'Glyphicons Halflings';
  43. content: "\e013";
  44. top: 42%;
  45. left: 3px;
  46. margin-top: -5px;
  47. font-size: 11px;
  48. line-height:;
  49. width: 16px;
  50. height: 16px;
  51. color: #333;
  52. }
  53. .checkbox-custom label {
  54. cursor: pointer;
  55. line-height: 1.2;
  56. font-weight: normal;/*改变了rememberme的字体*/
  57. margin-bottom:;
  58. text-align: left;
  59. }

bootstrap重新设计checkbox样式的更多相关文章

  1. bootstrap重新设计按钮样式

    1.将btn的样式换成以下的样式 2.思路: (1)将原来的btn样式设置color:#FFF,同时text-shadow设置,这样原来的btn样式就会变淡了,后面再加上新的样式就可以覆盖掉 注意:要 ...

  2. bootstrap table 自定义checkbox样式

    //css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...

  3. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  4. [bootstrap] 基本css样式和组件

    一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...

  5. bootstrap之css样式

    一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...

  6. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  7. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

  8. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

  9. Bootstrap基本CSS样式

    一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...

随机推荐

  1. asp.net反射的运用

    反射的用途:    (1)使用Assembly定义和加载程序集,加载在程序集清单中列出模块,以及从此程序集中查找类型并创建该类型的实例.     (2)使用Module了解包含模块的程序集以及模块中的 ...

  2. POJ 3694 无向图的桥

    Network Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 10404   Accepted: 3873 Descript ...

  3. [19/03/21-星期四] 异常(Exception) (一)

    一.引言 在实际工作中,我们遇到的情况不可能是非常完美的.比如:你写的某个模块,用户输入不一定符合你的要求;你的程序要打开某个文件, 这个文件可能不存在或者文件格式不对 ,你要读取数据库的数据,数据可 ...

  4. android:TableLayout表格布局详解

    http://blog.csdn.net/justoneroad/article/details/6835915 这篇博文包括的内容:1.TableLayout简介2.TableLayout行列数的确 ...

  5. .length()与.length与.size()

    .length  .length()属于数组的一个属性和string的一个方法,可以获得该数组或者字符串的长度,返回一个整型数据 .size()属于List泛型对象的一个方法,返回一个list对象中存 ...

  6. Redis集群整合到springboot框架

    整合步骤 1 配置application.properties spring.redis.cluster.nodes=192.168.60.131:8000,192.168.60.131:8001,1 ...

  7. 转载:/etc/security/limits.conf 控制文件描述符,进程数,栈大小

    原文地址:http://ilikedo.iteye.com/blog/1554822 linux下安装Oracle 一般都会修改/etc/security/limits.conf这个文件,但是这里面的 ...

  8. php第三节(运算符)

    <?php //算术运算符 + - * / % //++ 前加加 先做加运算后座赋值运算 后加加 先做赋值运算后座加运算 //-- 前减减 先做加运算后座赋值运算 后减减 先做赋值运算后座加运算 ...

  9. 在cmd下面执行.py文件时提示ModuleNotFoundError 但是 IDE 不报错

    原理是 python 解释器寻找 模块的顺序决定,不细说 简略来讲就是 在 IDE中运行,会自动帮你把项目根目录添加到 PYTHONPATH 中,但是在 cmd 运行需要自己添加. 解决方法: 1. ...

  10. 困扰我的c++语法

    以下是我上周学习c++ primer的心得: 1 数组引用作为形参 c++允许将变量定义成数组的引用,以下列代码为例.形参为int (&arr)[10],该参数需分成两部分说明,引用名和 引用 ...