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

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

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

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <title>选中标签forcheck</title>
7. <style 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. }
90. </style>
91. </head>
93. <body>
94. <div class="div-checked">
95. <label>
96. <input type="checkbox" value="cbEticket">
97. <i>电子票</i><span></span>
98. </label>
99. <label>
100. <input type="checkbox" checked="" value="cbMeetingRemind">
101. <i>会议提醒</i><span></span>
102. </label>
103. </div>
104. </body>
106. </html>

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

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

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

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

猜你喜欢