| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- /* The container */
- .container {
- display: block;
- position: relative;
- padding-left: 35px;
- margin-bottom: 12px;
- cursor: pointer;
- font-size: 16px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- /* Hide the browser's default checkbox */
- .container input {
- position: absolute;
- opacity: 0;
- cursor: pointer;
- height: 0;
- width: 0;
- }
-
- /* Create a custom checkbox */
- .checkmark {
- position: absolute;
- top: 0;
- left: 0;
- height: 24px;
- width: 24px;
- border: 1px solid#ccc;
- border-radius: 4px;
- background-color: rgb(255, 255, 255);
- }
-
- /* On mouse-over, add a grey background color */
- .checkmark:hover {
- background-color: #ccc;
- }
-
- /* When the checkbox is checked, add a blue background */
- .container input:checked ~ .checkmark {
- background-color: #5A6F7D;
- border: 1px solid#5A6F7D;
- }
-
- /* Create the checkmark/indicator (hidden when not checked) */
- .checkmark:after {
- content: "";
- position: absolute;
- display: none;
- }
-
- /* Show the checkmark when checked */
- .container input:checked ~ .checkmark:after {
- display: block;
- }
-
- /* Style the checkmark/indicator */
- .container .checkmark:after {
- left: 9px;
- top: 5px;
- width: 5px;
- height: 10px;
- border: solid white;
- border-width: 0 3px 3px 0;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
- }
|