设置复选框颜色java,css 设置 checkbox复选框控件的对勾√样式

1、 1.

2.

3. 4. `

`

5. ``

6. `

选中标签forcheck`

7. `

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. `}`

23.

24. /**

25. * checkbox选中样式

26. * @type {String}

27. */

28. input[type="checkbox"]:checked + i {

29. border-color: blue;

30. color: blue;

31. }

32. 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. `}`

46.

47. /**

48. * 对勾√效果，使用border

49. * @type {[type]}

50. */

51. 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. `}`

70.

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. }

86. 87. `}`

88.

89. }

90.

91.

92. 93. `

`

94. `

`

95. ``

96. ``

97. `电子票`

98. ``

99. ``

100. ``

101. `会议提醒`

102. ``

103. `

`

104. ``

105.

106.