{"id":20628,"date":"2022-11-10T07:57:33","date_gmt":"2022-11-10T02:27:33","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/"},"modified":"2022-11-10T07:57:33","modified_gmt":"2022-11-10T02:27:33","slug":"solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/","title":{"rendered":"[Solved] how to use a checkmark as a checkbox in css [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-48300618\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"48300618\" data-parentid=\"48300457\" data-score=\"2\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Customizing checkboxes is hard and requires a checkbox first. <\/p>\n<p>You will need a checkbox to hold the value of the check. And you will need to style the label, and hide the checkbox, so that you will only see the label, and this label will be able to interact with the checkbox.<\/p>\n<p>Try this instead : <\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.checkmark {\r\n    display:inline-block;\r\n    width: 22px;\r\n    height:22px;\r\n    -ms-transform: rotate(45deg); \/* IE 9 *\/\r\n    -webkit-transform: rotate(45deg); \/* Chrome, Safari, Opera *\/\r\n    transform: rotate(45deg);\r\n}\r\n\r\ninput[type=\"checkbox\"] { display: none; }\r\n\r\n.checkmark:before {\r\n    content: '';\r\n    position: absolute;\r\n    width:3px;\r\n    height:9px;\r\n    background-color:#ccc;\r\n    left:11px;\r\n    top:6px;\r\n}\r\n\r\n.checkmark {\r\n  cursor: pointer;\r\n}\r\n\r\n.checkmark:after {\r\n    content: '';\r\n    position: absolute;\r\n    width:3px;\r\n    height:3px;\r\n    background-color:#ccc;\r\n    left:8px;\r\n    top:12px;\r\n}\r\n\r\ninput[type=\"checkbox\"]:checked + .checkmark:before,\r\ninput[type=\"checkbox\"]:checked + .checkmark:after {\r\n  background-color: green;\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;input type=\"checkbox\" id=\"cb\"&gt;\r\n&lt;label for=\"cb\" class=\"checkmark\"&gt;&lt;\/label&gt;<\/code><\/pre>\n<\/div>\n<\/div><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">2<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved how to use a checkmark as a checkbox in css [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Customizing checkboxes is hard and requires a checkbox first. You will need a checkbox to hold the value of the check. And you will need to style the label, and hide the checkbox, so that you will only see the label, and this label will be able to interact with the checkbox. Try this &#8230; <a title=\"[Solved] how to use a checkmark as a checkbox in css [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/\" aria-label=\"More on [Solved] how to use a checkmark as a checkbox in css [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346],"class_list":["post-20628","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] how to use a checkmark as a checkbox in css [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] how to use a checkmark as a checkbox in css [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Customizing checkboxes is hard and requires a checkbox first. You will need a checkbox to hold the value of the check. And you will need to style the label, and hide the checkbox, so that you will only see the label, and this label will be able to interact with the checkbox. Try this ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-10T02:27:33+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] how to use a checkmark as a checkbox in css [closed]\",\"datePublished\":\"2022-11-10T02:27:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/\"},\"wordCount\":81,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/\",\"name\":\"[Solved] how to use a checkmark as a checkbox in css [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-10T02:27:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] how to use a checkmark as a checkbox in css [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] how to use a checkmark as a checkbox in css [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] how to use a checkmark as a checkbox in css [closed] - JassWeb","og_description":"[ad_1] Customizing checkboxes is hard and requires a checkbox first. You will need a checkbox to hold the value of the check. And you will need to style the label, and hide the checkbox, so that you will only see the label, and this label will be able to interact with the checkbox. Try this ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/","og_site_name":"JassWeb","article_published_time":"2022-11-10T02:27:33+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] how to use a checkmark as a checkbox in css [closed]","datePublished":"2022-11-10T02:27:33+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/"},"wordCount":81,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/","name":"[Solved] how to use a checkmark as a checkbox in css [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-10T02:27:33+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-use-a-checkmark-as-a-checkbox-in-css-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] how to use a checkmark as a checkbox in css [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=20628"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20628\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=20628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=20628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=20628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}