/* checkbox */ .con_chck { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .con_chck input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 17px; width: 17px; background-color: transparent; border:1px solid #ff9015; margin:23px 0 0 0; } /* On mouse-over, add a grey background color */ .con_chck:hover input ~ .checkmark { background-color: transparent; } /* When the checkbox is checked, add a blue background */ .con_chck input:checked ~ .checkmark { background-color: #ff9015; border:1px solid #ff9015; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .con_chck input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .con_chck .checkmark:after { left: 6px; top: 2px; width: 3px; height: 8px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }