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

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

posted @ 2019-04-17 09:09  xiaoshen666  阅读(8668)  评论(0)  编辑  收藏  举报