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>

css 設置 checkbox復選框控件的對勾√樣式

標簽：border absolute poi nbsp inpu oct 中標 inline bsp

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css 設置 checkbox復選框控件的對勾√樣式純CSS設置Checkbox復選框控件的樣式純CSS設置Checkbox復選框控件的樣式純CSS設置Checkbox復選框控件的樣式【轉】純CSS設置Checkbox復選框控件的樣式 css input checkbox復選框控件樣式美化的多種方案 input復選框checkbox默認樣式純css修改 css 自定義checkbox多選復選框樣式 vue input復選框checkbox默認樣式純css修改 css 自定義checkbox多選復選框樣式