CSS Examples ▶ Custom Checkbox CSS : add message

::
(ctrl+enter)    


Previous messages in the topic:
James
6/7/2021
This snippet can be applied to the native checkboxes generated by the Checkbox form control and make it so aesthetically pleasing that your UI team will stop bugging you about the native checkboxes.


/* CHECKBOX */
fieldset {
margin-bottom: 14px;
}

.field {
display: flex;
align-items: center;
margin-bottom: 14px;
}

.field:last-child {
margin: 0;
}

/* Removing the native appearance */

[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

/* Giving not checked state a new appearance */

[type=checkbox] {
width: 16px;
height: 16px;
border: solid 1px #cccccc;
margin-right: 8px;
position: relative;
border-radius: 4px;
}

/* Giving checked state a new appearance */

[type=checkbox]:checked::before {
content: "";
width: 12px;
height: 12px;
position: absolute;
top: 1px;
left: 1px;
border-radius: 3px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Crect x='0.653809' y='0.702637' width='20' height='20' rx='2' fill='%234DA1A8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.47491 10.6434C5.7772 9.91085 4.66087 11.0272 5.39346 11.7249C6.30048 12.6668 7.2075 13.6436 8.1494 14.5506C8.56802 14.9343 8.88199 14.9343 9.26573 14.5506L15.9288 7.92239C16.6265 7.1898 15.5451 6.07347 14.8125 6.80606L8.74245 12.8761L6.47491 10.6434Z' fill='white'/%3E%3C/svg%3E");
background-size: 12px;
}

/* CHECKBOX */
edited by James on 6/7/2021




Powered by Jitbit Forum 8.3.8.0 © 2006-2013 Jitbit Software