HomeCSS Examples

Here you can see a collection of sample CSS being used on a variety of Decisions Form and Page Components

Custom Checkbox CSS Messages in this topic - RSS add reply

James
James
Posts: 1


6/7/2021
James
James
Posts: 1
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
+1 link reply with quote


(Ctrl+Enter)




Powered by Jitbit Forum 8.3.8.0 © 2006-2013 Jitbit Software