1. CSS checkbox styling
  2. <ul class="imageless-css-3-form-elements" style="list-style-type: none">
  3. <li><label><input type="checkbox" class="public"><span style="color:#fff">PUBLIC</span></label></li>
  4. <li><label><input type="checkbox" class="private"><span style="color:#fff">PRIVATE</span></label></li>
  5. <li><label><input type="checkbox" class="semi-p"><span style="color:#fff">SEMI-PRIVATE</span></label></li>
  6. <li><label><input type="checkbox" class="grouped"><span style="color:#fff">GROUPED</span></label></li>
  7. </ul>
  8.  
  9. .imageless-css-3-form-elements label
  10. {
  11. cursor: hand;
  12. cursor: pointer;
  13. }
  14.  
  15. .imageless-css-3-form-elements label input[type="checkbox"],
  16. .imageless-css-3-form-elements label input[type="radio"],
  17. .imageless-css-3-form-elements label input[type="checkbox"] + span,
  18. .imageless-css-3-form-elements label input[type="radio"] + span,
  19. .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
  20. .imageless-css-3-form-elements label input[type="radio"] + span::before
  21. {
  22. vertical-align: middle;
  23. }
  24.  
  25. .imageless-css-3-form-elements label input[type="checkbox"],
  26. .imageless-css-3-form-elements label input[type="radio"]
  27. {
  28. position: absolute;
  29. filter: alpha(opacity=0);
  30. -moz-opacity: 0;
  31. -webkit-opacity: 0;
  32. opacity: 0;
  33. }
  34.  
  35. .imageless-css-3-form-elements label input[type="checkbox"] + span,
  36. .imageless-css-3-form-elements label input[type="radio"] + span,
  37. .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
  38. .imageless-css-3-form-elements label input[type="radio"] + span::before
  39. {
  40. display: inline-block;
  41. }
  42.  
  43. .imageless-css-3-form-elements label input[type="checkbox"] + span,
  44. .imageless-css-3-form-elements label input[type="radio"] + span
  45. {
  46. font: normal 13px/14px "Segoe UI", Sans-serif;
  47. font-weight: 900;
  48. }
  49.  
  50. .imageless-css-3-form-elements label input[type="checkbox"] + span::before
  51. {
  52. content: "2714";
  53. font-weight: 900;
  54.  
  55. }
  56.  
  57. .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
  58. .imageless-css-3-form-elements label input[type="radio"] + span::before
  59. {
  60. text-indent: -9999px;
  61. width: 12px;
  62. height: 12px;
  63. font: 12px/12px Garamond, "Segoe UI", Sans-serif;
  64. font-weight: 900;
  65. text-transform: uppercase;
  66. border: solid 1px #0b70cd;
  67. border-radius: 3px;
  68. box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
  69.  
  70. background: #78CCBB;/*#0b70cd;*/
  71. /*background: -moz-linear-gradient(-45deg, #fefefe, #0b70cd);
  72. background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd);
  73. background: -o-linear-gradient(-45deg, #fefefe, #0b70cd);
  74. background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd);
  75. background: linear-gradient(-45deg, #fefefe, #0b70cd);*/
  76. margin: 0 7px 4px 0;
  77. }
  78.  
  79. .imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before,
  80. .imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before
  81. {
  82. background: #78CCBB; /*#0b70cd;*/
  83. /*background: -moz-linear-gradient(45deg, #fefefe, #0b70cd);
  84. background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd);
  85. background: -o-linear-gradient(45deg, #fefefe, #0b70cd);
  86. background: -ms-linear-gradient(45deg, #fefefe, #0b70cd);
  87. background: linear-gradient(45deg, #fefefe, #0b70cd);*/
  88. box-shadow: 0 0 1px 2px #78CCBB; /*#ccc*/
  89. }
  90.  
  91. .imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before,
  92. .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
  93. {
  94. text-indent: 2px;
  95. color: #fff;
  96. text-shadow: 0 0 2px #0b70cd;
  97. font-weight: 900;
  98. }
  99.  
  100. .imageless-css-3-form-elements label input[type="radio"] + span::before
  101. {
  102. content: "2022";
  103. font-size: 22px;
  104. -moz-border-radius: 12px;
  105. -webkit-border-radius: 12px;
  106. border-radius: 12px;
  107. }
  108.  
  109. .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
  110. {
  111. text-indent: 2px;
  112. }
  113.  
  114. .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
  115. .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
  116. {
  117. filter: alpha(opacity=50);
  118. -moz-opacity: .5;
  119. -webkit-opacity: .5;
  120. opacity: .5;
  121. }
  122.  
  123. .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span,
  124. .imageless-css-3-form-elements label input[type="radio"]:disabled + span,
  125. .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
  126. .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
  127. {
  128. cursor: default;
  129. }
  130.  
  131. .public_li{background-color:#78CCBB;}
  132. .private_li{ background-color:#A62929}
  133. .semi-p_li{background-color:#78CCBB;}
  134. .grouped_li{ background-color:#A62929}
  135.  
  136. <ul class="imageless-css-3-form-elements" style="list-style-type: none">
  137. <li class="public_li"> <label><input type="checkbox" class="public"><span style="color:#fff">PUBLIC</span></label></li>
  138. <li class="private_li"><label><input type="checkbox" class="private"><span style="color:#fff">PRIVATE</span></label></li>
  139. <li class="semi-p_li"><label><input type="checkbox" class="semi-p"><span style="color:#fff">SEMI-PRIVATE</span></label></li>
  140. <li class="grouped"><label><input type="checkbox" class="grouped"><span style="color:#fff">GROUPED</span></label></li>
  141. </ul>
  142.  
  143. .imageless-css-3-form-elements label
  144. {
  145. cursor: hand;
  146. cursor: pointer;
  147. }
  148.  
  149. .imageless-css-3-form-elements label input[type="checkbox"],
  150. .imageless-css-3-form-elements label input[type="radio"],
  151. .imageless-css-3-form-elements label input[type="checkbox"] + span,
  152. .imageless-css-3-form-elements label input[type="radio"] + span,
  153. .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
  154. .imageless-css-3-form-elements label input[type="radio"] + span::before
  155. {
  156. vertical-align: middle;
  157. }
  158.  
  159. .imageless-css-3-form-elements label input[type="checkbox"],
  160. .imageless-css-3-form-elements label input[type="radio"]
  161. {
  162. position: absolute;
  163. filter: alpha(opacity=0);
  164. -moz-opacity: 0;
  165. -webkit-opacity: 0;
  166. opacity: 0;
  167. }
  168.  
  169. .imageless-css-3-form-elements label input[type="checkbox"] + span,
  170. .imageless-css-3-form-elements label input[type="radio"] + span,
  171. .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
  172. .imageless-css-3-form-elements label input[type="radio"] + span::before
  173. {
  174. display: inline-block;
  175. }
  176.  
  177. .imageless-css-3-form-elements label input[type="checkbox"] + span,
  178. .imageless-css-3-form-elements label input[type="radio"] + span
  179. {
  180. font: normal 13px/14px "Segoe UI", Sans-serif;
  181. font-weight: 900;
  182. }
  183.  
  184. .imageless-css-3-form-elements label input[type="checkbox"] + span::before
  185. {
  186. content: "2714";
  187. font-weight: 900;
  188.  
  189. }
  190.  
  191. .imageless-css-3-form-elements label input[type="checkbox"].public + span::before,
  192. .imageless-css-3-form-elements label input[type="radio"] + span::before
  193. {
  194. text-indent: -9999px;
  195. width: 12px;
  196. height: 12px;
  197. font: 12px/12px Garamond, "Segoe UI", Sans-serif;
  198. font-weight: 900;
  199. text-transform: uppercase;
  200. border: solid 1px #0b70cd;
  201. border-radius: 3px;
  202. box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
  203.  
  204. background: #78CCBB;/*#0b70cd;*/
  205. margin: 0 7px 4px 0;
  206. }
  207.  
  208. .imageless-css-3-form-elements label input[type="checkbox"].private + span::before,
  209. .imageless-css-3-form-elements label input[type="radio"] + span::before
  210. {
  211. text-indent: -9999px;
  212. width: 12px;
  213. height: 12px;
  214. font: 12px/12px Garamond, "Segoe UI", Sans-serif;
  215. font-weight: 900;
  216. text-transform: uppercase;
  217. border: solid 1px #0b70cd;
  218. border-radius: 3px;
  219. box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
  220.  
  221. background: #A62929;/*#0b70cd;*/
  222. margin: 0 7px 4px 0;
  223. }
  224.  
  225. .imageless-css-3-form-elements label input[type="checkbox"].semi-p + span::before,
  226. .imageless-css-3-form-elements label input[type="radio"] + span::before
  227. {
  228. text-indent: -9999px;
  229. width: 12px;
  230. height: 12px;
  231. font: 12px/12px Garamond, "Segoe UI", Sans-serif;
  232. font-weight: 900;
  233. text-transform: uppercase;
  234. border: solid 1px #0b70cd;
  235. border-radius: 3px;
  236. box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
  237.  
  238. background: #FFD996;/*#0b70cd;*/
  239. margin: 0 7px 4px 0;
  240. }
  241.  
  242. .imageless-css-3-form-elements label input[type="checkbox"].grouped + span::before,
  243. .imageless-css-3-form-elements label input[type="radio"] + span::before
  244. {
  245. text-indent: -9999px;
  246. width: 12px;
  247. height: 12px;
  248. font: 12px/12px Garamond, "Segoe UI", Sans-serif;
  249. font-weight: 900;
  250. text-transform: uppercase;
  251. border: solid 1px #0b70cd;
  252. border-radius: 3px;
  253. box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
  254.  
  255. background: #81A2CF;/*#0b70cd;*/
  256. margin: 0 7px 4px 0;
  257. }
  258.  
  259. .imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before,
  260. .imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before
  261. {
  262. background: #78CCBB; /*#0b70cd;*/
  263. /*background: -moz-linear-gradient(45deg, #fefefe, #0b70cd);
  264. background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd);
  265. background: -o-linear-gradient(45deg, #fefefe, #0b70cd);
  266. background: -ms-linear-gradient(45deg, #fefefe, #0b70cd);
  267. background: linear-gradient(45deg, #fefefe, #0b70cd);*/
  268. box-shadow: 0 0 1px 2px #78CCBB; /*#ccc*/
  269. }
  270.  
  271. .imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before,
  272. .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
  273. {
  274. text-indent: 2px;
  275. color: #fff;
  276. text-shadow: 0 0 2px #0b70cd;
  277. font-weight: 900;
  278. }
  279.  
  280. .imageless-css-3-form-elements label input[type="radio"] + span::before
  281. {
  282. content: "2022";
  283. font-size: 22px;
  284. -moz-border-radius: 12px;
  285. -webkit-border-radius: 12px;
  286. border-radius: 12px;
  287. }
  288.  
  289. .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
  290. {
  291. text-indent: 2px;
  292. }
  293.  
  294. .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
  295. .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
  296. {
  297. filter: alpha(opacity=50);
  298. -moz-opacity: .5;
  299. -webkit-opacity: .5;
  300. opacity: .5;
  301. }
  302.  
  303. .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span,
  304. .imageless-css-3-form-elements label input[type="radio"]:disabled + span,
  305. .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
  306. .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
  307. {
  308. cursor: default;
  309. }