Advertisement
afsarwebdev

Checkbox style

Jul 3rd, 2018
165
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.12 KB | None | 0 0
  1. /*checkbox style*/
  2. /*HTML*/
  3. <label>Restaurant
  4. <input type="checkbox">
  5. <span class="checkmark"></span>
  6. </label>
  7.  
  8. /*css*/
  9. label {
  10. font-weight: 400;
  11. line-height: 20px;
  12. display: block;
  13. position: relative;
  14. padding-left: 30px;
  15. margin-bottom: 20px;
  16. font-size: 18px;
  17. -webkit-user-select: none;
  18. -moz-user-select: none;
  19. -ms-user-select: none;
  20. user-select: none;
  21. }
  22. label input {
  23. position: absolute;
  24. opacity: 0;
  25. cursor: pointer;
  26. }
  27. label span {
  28. position: absolute;
  29. top: 0;
  30. left: 0;
  31. height: 18px;
  32. width: 18px;
  33. background-color: #b3b2b2;
  34. transition: all 0.4s;
  35. }
  36. label:hover input ~ span,
  37. label input:checked ~ span {
  38. background-color: #28aaa9;
  39. }
  40. label input:checked + .ic-single-psidebar form label {
  41. color: #28aaa9;
  42. }
  43. label span:after {
  44. position: absolute;
  45. content: "";
  46. display: none;
  47. }
  48. label input:checked ~ span:after {
  49. display: block;
  50. }
  51.  
  52. label span:after {
  53. left: 7px;
  54. top: 2px;
  55. width: 6px;
  56. height: 11px;
  57. border: solid white;
  58. border-width: 0px 2px 2px 0;
  59. -webkit-transform: rotate(45deg);
  60. -ms-transform: rotate(45deg);
  61. transform: rotate(45deg);
  62. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement