|
123456789101112131415161718192021222324252627282930 |
- /*CUSTOM Checkbox
- /* Customize the label (the container) */
- .form-check-label {display: block; position: relative; padding-left: 26px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
- /* Hide the browser's default checkbox */
- .form-check-label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
- /* Create a custom checkbox */
-
- .form-check{padding-left: 0px;}
-
- .form-sent .form-check-label input:invalid ~ .checkmark { border-color: #dc3545;}
- .form-check-label input:disabled ~ .checkmark {display: none}
- .form-check-label input ~ .checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: #eee;border: 1px solid var(--primary);}
- .form-check-label.big input ~ .checkmark { height: 21px; width: 21px; }
- .form-check-label input[type="checkbox"] ~ .checkmark {top: 2px;}
- .form-check-label input[type="radio"] ~ .checkmark { top:3px; border-radius: 50%;}
- .form-check-label:hover input ~ .checkmark { background-color: #ccc;}
- /* When the checkbox is checked, add a blue background */
- .form-check-label input:checked ~ .checkmark {background-color: var(--primary);}
- /* Create the checkmark/indicator (hidden when not checked) */
- .form-check-label .checkmark:after { content: ""; position: absolute; display: none;}
- /* Show the checkmark when checked */
- .form-check-label input:checked ~ .checkmark:after {display: block;}
- /* Style the checkmark/indicator */
- .form-check-label .checkmark:after {left: 7px; top: 3px; width: 6px; height: 11px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
- .form-check-label input[type="checkbox"] ~ .checkmark:after {left: 6px; top: 2px; width: 6px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
- .form-check-label input[type="radio"] ~ .checkmark:after {top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: white;}
-
- .form-check-label.big input[type="checkbox"] ~ .checkmark:after {left: 7px; top: 3px; width: 6px; height: 11px;}
- /* Create a custom radio button */
-
|
