{"id":5367,"date":"2026-04-17T11:04:56","date_gmt":"2026-04-17T10:04:56","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=5367"},"modified":"2026-04-17T11:04:56","modified_gmt":"2026-04-17T10:04:56","slug":"checkbox-attractive-tick-box","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/forms-css\/checkbox-forms-css\/checkbox-attractive-tick-box","title":{"rendered":"Checkbox attractive tick box"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Checkbox as an attractive tick box<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">CSS<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*-------------------------*\/\n\/*----- TICK CHECKBOX -----*\/\n\/*------------------- -----*\/\n\n\/* Customize the label (the container) *\/\n.odac_tick_checkbox .container {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  margin-bottom: 14px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 16px;\n  text-align: left;\n  padding: 7px 6px 7px 37px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #EBEBEB;\n  border-radius: 4px;\n  box-sizing: border-box;\n  min-height: 40px;\n}\n\n.odac_tick_checkbox .container .vert_align_middle {\n  position: static;\n  transform: none;\n}\n\n\n\/* Hide the browser's default checkbox *\/\n.odac_tick_checkbox .container input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n\/* Create a custom checkbox *\/\n.odac_tick_checkbox .checkmark {\n  position: absolute;\n  top: 7px;\n  left: 6px;\n  height: 25px;\n  width: 25px;\n  background-color: #D3D3D3;\n}\n\n\/* On mouse-over, add a grey background color *\/\n.odac_tick_checkbox .container:hover input ~ .checkmark {\n  background-color: #ccc;\n}\n\n\/* When the checkbox is checked, add a teal background *\/\n.odac_tick_checkbox .container input:checked ~ .checkmark {\n  background-color: var(--odac-color-main1);\n}\n\n\n\/* Create the checkmark\/indicator (hidden when not checked) *\/\n.odac_tick_checkbox .checkmark:after {\n  content: \"\";\n  position: absolute;\n  display: none;\n}\n\n\/* Show the checkmark when checked *\/\n.odac_tick_checkbox .container input:checked ~ .checkmark:after {\n  display: block;\n}\n\n\/* Create the checkmark\/indicator symbol (this shape is the tick!)*\/\n.odac_tick_checkbox .container .checkmark:after {\n  left: 9px;\n  top: 5px;\n  width: 7px;\n  height: 14px;\n  border: solid white;\n  border-width: 0 3px 3px 0;\n  -webkit-transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  transform: rotate(45deg);\n}<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">HTML<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;div class=\"odac_tick_checkbox\"&gt;\n    &lt;label class=\"container\"&gt;&lt;div class=\"vert_align_middle\"&gt;My Option&lt;\/div&gt;\n      &lt;input type=\"checkbox\" name=\"MyOption\" value=\"1\" &gt;\n      &lt;span class=\"checkmark\"&gt;&lt;\/span&gt;\n    &lt;\/label&gt;\n  &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Checkbox as an attractive tick box CSS HTML<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[392],"tags":[],"class_list":["post-5367","post","type-post","status-publish","format-standard","hentry","category-checkbox-forms-css"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/5367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=5367"}],"version-history":[{"count":1,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/5367\/revisions"}],"predecessor-version":[{"id":5368,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/5367\/revisions\/5368"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=5367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=5367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=5367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}