registerform.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /* The container */
  2. .container {
  3. display: block;
  4. position: relative;
  5. padding-left: 35px;
  6. margin-bottom: 12px;
  7. cursor: pointer;
  8. font-size: 16px;
  9. -webkit-user-select: none;
  10. -moz-user-select: none;
  11. -ms-user-select: none;
  12. user-select: none;
  13. }
  14. /* Hide the browser's default checkbox */
  15. .container input {
  16. position: absolute;
  17. opacity: 0;
  18. cursor: pointer;
  19. height: 0;
  20. width: 0;
  21. }
  22. /* Create a custom checkbox */
  23. .checkmark {
  24. position: absolute;
  25. top: 0;
  26. left: 0;
  27. height: 24px;
  28. width: 24px;
  29. border: 1px solid#ccc;
  30. border-radius: 4px;
  31. background-color: rgb(255, 255, 255);
  32. }
  33. /* On mouse-over, add a grey background color */
  34. .checkmark:hover {
  35. background-color: #ccc;
  36. }
  37. /* When the checkbox is checked, add a blue background */
  38. .container input:checked ~ .checkmark {
  39. background-color: #5A6F7D;
  40. border: 1px solid#5A6F7D;
  41. }
  42. /* Create the checkmark/indicator (hidden when not checked) */
  43. .checkmark:after {
  44. content: "";
  45. position: absolute;
  46. display: none;
  47. }
  48. /* Show the checkmark when checked */
  49. .container input:checked ~ .checkmark:after {
  50. display: block;
  51. }
  52. /* Style the checkmark/indicator */
  53. .container .checkmark:after {
  54. left: 9px;
  55. top: 5px;
  56. width: 5px;
  57. height: 10px;
  58. border: solid white;
  59. border-width: 0 3px 3px 0;
  60. -webkit-transform: rotate(45deg);
  61. -ms-transform: rotate(45deg);
  62. transform: rotate(45deg);
  63. }