34 Free Custom CSS Checkbox Styles 2026 ProofMatcher has 34 free CSS checkbox components replacing ugly browser defaults with animated, stylish designs. Animated Checkmark <label class= "cb-wrap" > <input type= "checkbox" id= "cb1" > <span class= "cb" ></span> Accept terms and conditions </label> Enter fullscreen mode Exit fullscreen mode .cb-wrap { display : flex ; align-items : center ; gap : 10px ; cursor : pointer ; user-select : none ; } .cb-wrap input { display : none ; } .cb { width : 22px ; height : 22px ; border : 2px solid rgba ( 255 , 255 , 255 , .25 ); border-radius : 5px ; background : transparent ; transition : all .2s ; display : flex ; align-items : center ; justify-content : center ; } .cb-wrap input :checked + .cb { background : #e53e3e ; border-color : #e53e3e ; } .cb-wrap input :checked + .cb ::after { content : '✓' ; color : #fff ; font-size : 13px ; font-weight : 700 ; } Enter fullscreen mode Exit fullscreen mode Sliding Toggle Checkbox .toggle { position :…