{"id":16543,"date":"2013-02-27T21:01:11","date_gmt":"2013-02-27T13:01:11","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16543"},"modified":"2024-09-03T23:12:20","modified_gmt":"2024-09-03T15:12:20","slug":"css3-checkbox-radio","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/","title":{"rendered":"Enhance Checkbox and Radio Button Design Using CSS3"},"content":{"rendered":"

With CSS3, we can customize web presentations to be almost anything we want them to be. In this post, we\u2019ll explore how to personalize the appearance of checkbox<\/code> and radio<\/code> inputs using CSS.<\/p>\n

These form elements can be tricky to style consistently across different platforms \u2013 Windows<\/a>, macOS<\/a>, and Linux<\/a> each have their own default designs. This tutorial will guide you through customizing these elements for a unified appearance.<\/p>\n

If you\u2019re looking to personalize these form elements, this tutorial is for you. Let\u2019s dive in.<\/p>\n

\n

HTML Markup<\/h2>\n

We\u2019ll start by creating a basic HTML structure.<\/p>\n

Radio Input<\/strong><\/p>\n

\r\n<div class=\"radio\">\r\n    <input id=\"male\" type=\"radio\" name=\"gender\" value=\"male\">\r\n    <label for=\"male\">Male<\/label>\r\n    <input id=\"female\" type=\"radio\" name=\"gender\" value=\"female\">\r\n    <label for=\"female\">Female<\/label>\r\n<\/div>\r\n<\/pre>\n
Checkbox Input<\/strong><\/p>\n
\r\n<div class=\"checkbox\">\r\n    <input id=\"check1\" type=\"checkbox\" name=\"check\" value=\"check1\">\r\n    <label for=\"check1\">Checkbox No. 1<\/label>\r\n    <br>\r\n    <input id=\"check2\" type=\"checkbox\" name=\"check\" value=\"check2\">\r\n    <label for=\"check2\">Checkbox No. 2<\/label>\r\n<\/div>\r\n<\/pre>\n
\n
CSS<\/h2>\n
With the HTML structure in place, let\u2019s add some styles to the <input><\/code> elements. We\u2019ll start with the radio input type. The goal is to transform the default OS design into something similar to the screenshot below.<\/p>\n
\"Customized<\/figure>\n
Styling Radio Input<\/h3>\n
First, we\u2019ll set the cursor on the labels to a pointer to indicate they are clickable, and then apply some additional styles.<\/p>\n
\r\nlabel {\r\n    display: inline-block;\r\n    cursor: pointer;\r\n    position: relative;\r\n    padding-left: 25px;\r\n    margin-right: 15px;\r\n    font-size: 13px;\r\n}\r\n<\/pre>\n
Next, we\u2019ll hide the default radio<\/code> input.<\/p>\n
\r\ninput[type=radio] {\r\n    display: none;\r\n}\r\n<\/pre>\n
We\u2019ll then replace the hidden radio<\/code> input with a pseudo-element using :before<\/code>.<\/p>\n
\r\nlabel:before {\r\n    content: \"\";\r\n    display: inline-block;\r\n    width: 16px;\r\n    height: 16px;\r\n    margin-right: 10px;\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: 1px;\r\n    background-color: #aaa;\r\n    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, .3), 0px 1px rgba(255, 255, 255, .8);\r\n}\r\n<\/pre>\n
The above styles can also be applied to the checkbox input type. The only difference is that the radio input type is circular. To achieve this, we add border-radius<\/code> with a value that\u2019s half the height and width.<\/p>\n
\r\n.radio label:before {\r\n    border-radius: 8px;\r\n}\r\n<\/pre>\n
Recommended Reading<\/strong>: Understanding Pseudo-elements: before and after<\/a><\/p>\n
At this stage, here\u2019s how our radio<\/code> input type looks:<\/p>\n
\"Styled<\/figure>\n
Now, we\u2019ll add a small circle inside when the input is checked. We will utilize the CSS3 :checked<\/code> pseudo-class along with the Bullet HTML character (•<\/code>). To use this character in CSS, you\u2019ll need to convert it using an Entity Conversion Tool<\/a>.<\/p>\n
\r\ninput[type=radio]:checked + label:before {\r\n    content: \"\\2022\";\r\n    color: #f3f3f3;\r\n    font-size: 30px;\r\n    text-align: center;\r\n    line-height: 18px;\r\n}\r\n<\/pre>\n
When the hidden radio input is checked, a smaller circle appears, as shown below.<\/p>\n
\"Checked<\/figure>\n
Alternatively, you can use an image as a background in the :before<\/code> pseudo-element instead of relying on CSS, but it\u2019s often better to avoid images when possible.<\/p>\n
Styling Checkbox Input<\/h3>\n
Next, we\u2019ll style the checkbox<\/code> input type. As before, we\u2019ll start by hiding the input element.<\/p>\n
\r\ninput[type=checkbox] {\r\n    display: none;\r\n}\r\n<\/pre>\n
Since we\u2019ve already replaced the input with a :before<\/code> pseudo-element, we\u2019ll now add the border radius to create a square shape.<\/p>\n
\r\n.checkbox label:before {\r\n    border-radius: 3px;\r\n}\r\n<\/pre>\n
We\u2019ll then add a checkmark using the Check Mark HTML Character (✓<\/code>) when the input is checked.<\/p>\n
\r\ninput[type=checkbox]:checked + label:before {\r\n    content: \"\\2713\";\r\n    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);\r\n    font-size: 15px;\r\n    color: #f3f3f3;\r\n    text-align: center;\r\n    line-height: 15px;\r\n}\r\n<\/pre>\n
Here\u2019s the final appearance of our checkbox:<\/p>\n
\"Styled<\/figure>\n
\n
Final Thoughts<\/h2>\n
This is just one method to customize checkbox<\/code> and radio<\/code> inputs, and you can certainly enhance the look further. Keep in mind that this technique relies on CSS3 :checked<\/code>, so it will only work in browsers that support this feature. If you prefer, you can use a jQuery Plugin<\/a> instead.<\/p>\n
Finally, you can view the demo and download the source code using the links below:<\/p>\n
<\/i>  View Demo <\/span><\/a>\n<\/i>  Download Source <\/span><\/a> <\/p>","protected":false},"excerpt":{"rendered":"
With CSS3, we can customize web presentations to be almost anything we want them to be. In this post, we\u2019ll explore how to personalize the appearance of checkbox and radio inputs using CSS. These form elements can be tricky to style consistently across different platforms \u2013 Windows, macOS, and Linux each have their own default…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[507,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCustomize Checkboxes and Radio Buttons with CSS3<\/title>\n<meta name=\"description\" content=\"With CSS3, we can customize web presentations to be almost anything we want them to be. In this post, we'll explore how to personalize the appearance of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enhance Checkbox and Radio Button Design Using CSS3\" \/>\n<meta property=\"og:description\" content=\"With CSS3, we can customize web presentations to be almost anything we want them to be. In this post, we'll explore how to personalize the appearance of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-27T13:01:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-03T15:12:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-checkbox-radio\/input-radio-preview.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Enhance Checkbox and Radio Button Design Using CSS3\",\"datePublished\":\"2013-02-27T13:01:11+00:00\",\"dateModified\":\"2024-09-03T15:12:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/\"},\"wordCount\":495,\"commentCount\":26,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-checkbox-radio\\\/input-radio-preview.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/\",\"name\":\"Customize Checkboxes and Radio Buttons with CSS3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-checkbox-radio\\\/input-radio-preview.jpg\",\"datePublished\":\"2013-02-27T13:01:11+00:00\",\"dateModified\":\"2024-09-03T15:12:20+00:00\",\"description\":\"With CSS3, we can customize web presentations to be almost anything we want them to be. In this post, we'll explore how to personalize the appearance of\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-checkbox-radio\\\/input-radio-preview.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-checkbox-radio\\\/input-radio-preview.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-checkbox-radio\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Enhance Checkbox and Radio Button Design Using CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Customize Checkboxes and Radio Buttons with CSS3","description":"With CSS3, we can customize web presentations to be almost anything we want them to be. In this post, we'll explore how to personalize the appearance of","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:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/","og_locale":"en_US","og_type":"article","og_title":"Enhance Checkbox and Radio Button Design Using CSS3","og_description":"With CSS3, we can customize web presentations to be almost anything we want them to be. In this post, we'll explore how to personalize the appearance of","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-02-27T13:01:11+00:00","article_modified_time":"2024-09-03T15:12:20+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-checkbox-radio\/input-radio-preview.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Enhance Checkbox and Radio Button Design Using CSS3","datePublished":"2013-02-27T13:01:11+00:00","dateModified":"2024-09-03T15:12:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/"},"wordCount":495,"commentCount":26,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-checkbox-radio\/input-radio-preview.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/","name":"Customize Checkboxes and Radio Buttons with CSS3","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-checkbox-radio\/input-radio-preview.jpg","datePublished":"2013-02-27T13:01:11+00:00","dateModified":"2024-09-03T15:12:20+00:00","description":"With CSS3, we can customize web presentations to be almost anything we want them to be. In this post, we'll explore how to personalize the appearance of","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-checkbox-radio\/input-radio-preview.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-checkbox-radio\/input-radio-preview.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Enhance Checkbox and Radio Button Design Using CSS3"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4iP","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16543"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16543\/revisions"}],"predecessor-version":[{"id":72813,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16543\/revisions\/72813"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16543"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}