css 设置 checkbox复选框控件的对勾√样式

css 设置 checkbox复选框控件的对勾√样式

最终的样式，想要的效果：

 

我们要创建方框中的对勾，对于这一点，我们可以使用伪类创建一个新的元素，为了实现这个样式，我们可以创建一个5px * 15px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的属性让它旋转一下，这样看起来就像是一个对勾。

1. 2. lang="en">
   5. charset="UTF-8">
   7. type="text/css">
   8. .div-checked label {
   9. cursor: pointer;
   10. position: relative;
   11. display: inline-block;
   12. width: 150px;
   13. height: 38px;
   14. border: 1px solid grey;
   15. }
   16. /**
   17. * 按钮透明
   18. * @type {String}
   19. */
   20. input[type="checkbox"] {
   21. opacity: 0;
   22. }
   24. /**
   25. * checkbox选中样式
   26. * @type {String}
   27. */
   28. input[type="checkbox"]:checked + i {
   29. border-color: blue;
   30. color: blue;
   31. }
   33. /**
   34. * i标签的大小
   35. */
   36. i {
   37. position: absolute;
   38. top: 0;
   39. left: 0;
   40. width: 100%;
   41. height: 100%;
   42. border: 1px solid #ccc;
   43. text-align: center;
   44. line-height: 36px;
   45. }
   47. /**
   48. * 对勾√效果，使用border
   49. * @type {[type]}
   50. */
   52. span:after {
   53. opacity: 1;
   54. content: ‘‘;
   55. position: absolute;
   56. width: 5px;
   57. height: 15px;
   58. background: transparent;
   59. top: 10px;
   60. right: 5px;
   61. border: 2px solid #fff;
   62. border-top: none;
   63. border-left: none;
   64. -webkit-transform: rotate(35deg);
   65. -moz-transform: rotate(35deg);
   66. -o-transform: rotate(35deg);
   67. -ms-transform: rotate(35deg);
   68. transform: rotate(35deg);
   69. }
   71. /**
   72. * 选中状态，span(三角形)样式
   73. * @type {String}
   74. */
   75. input[type="checkbox"]:checked + i + span {
   76. width: 0px;
   77. height: 0px;
   78. border-color: blue transparent;
   79. border-width: 0px 0px 30px 30px;
   80. border-style: solid;
   81. position: absolute;
   82. right: -1px;
   83. top: 10px;
   84. opacity: 1;
   85. }
   87. }
   89. }
   94. class="div-checked">
   96. type="checkbox" value="cbEticket">
   97. 电子票
   100. type="checkbox" checked="" value="cbMeetingRemind">
   101. 会议提醒

 

css 设置 checkbox复选框控件的对勾√样式

标签：border   absolute   poi   nbsp   inpu   oct   中标   inline   bsp   

原文地址：http://www.cnblogs.com/liusc/p/57c27a929622b8de72155d98888f67cc.html

转载于:https://www.cnblogs.com/xiaoshen666/p/10721404.html