.checkbox-styled { position: relative; display: inline-block; height: 18px; width: 18px; margin: 0 5px 4px 0; background-color: #fff; border: 1px solid #DADADA; border-radius: 2px; -webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out; cursor: pointer; vertical-align: middle; } .checkbox-styled:before { position: absolute; top: 50%; left: 50%; display: block; content: "\f00c"; height: 0; width: 0; opacity: 0; color: #25c268; font-size: 0; font-family: 'FontAwesome'; line-height: 16px; text-align: center; line-height: 1px; -webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out; } .checkbox-styled.checked:before{ top: 0; left: 0; height: 16px; width: 16px; opacity: 1; font-size: 14px; line-height: 16px; } .checkbox-styled:not(.disabled):hover { border: 1px solid #25c268; } .checkbox-styled.disabled { border: 1px solid #EEEEEE; } .checkbox-styled.disabled:before { color: #BED1C6; }