{"id":3521,"date":"2021-01-13T12:18:48","date_gmt":"2021-01-13T12:18:48","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=3521"},"modified":"2026-03-06T01:32:31","modified_gmt":"2026-03-06T01:32:31","slug":"checkbox-2","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/forms-css\/checkbox-2","title":{"rendered":"Checkbox"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Basic checkbox css<\/h4>\n\n\n\n<p>input[type=&#8221;checkbox&#8221;] is for the actual checkbox, excluding its label<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.MyFormClass input&#91;type=\"checkbox\"] {\n  display: inline-block;\n  margin-right: 4px;    \/*Gap between checkbox and its label*\/\n  margin-left: 8px;    \/*Gap between checkbox and previous label*\/\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Style a checkbox and its label<\/h4>\n\n\n\n<p>Put it within a div<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"MyCheckboxStyle\"&gt;&lt;input type=\"checkbox\" name=\"MyCheckbox\" value=\"1\" \/&gt;My Checkbox Label&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Checkbox + Label on line with space added under<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"checkbox\" name=\"CheckboxSetting1\" $CheckboxSetting1_Checked value=\"Yes\" \/&gt;&lt;label&gt;Checkbox Setting 1&lt;\/label&gt;\n\ninput&#91;type=\"checkbox\"] {\n  display: inline-block;\n}\ninput&#91;type=\"checkbox\"] + label {\n  display: inline-block;\n  margin-bottom: 10px;\n}<\/code><\/pre>\n\n\n\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>Basic checkbox css input[type=&#8221;checkbox&#8221;] is for the actual checkbox, excluding its label Style a checkbox and its label Put it within a div Checkbox + Label on line with space added under Checkbox as an attractive tick box CSS HTML<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[220],"tags":[],"class_list":["post-3521","post","type-post","status-publish","format-standard","hentry","category-forms-css"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3521","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=3521"}],"version-history":[{"count":10,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3521\/revisions"}],"predecessor-version":[{"id":5313,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3521\/revisions\/5313"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=3521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=3521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=3521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}