{"id":3109,"date":"2018-02-26T18:58:08","date_gmt":"2018-02-26T18:58:08","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3109"},"modified":"2018-02-26T18:58:08","modified_gmt":"2018-02-26T18:58:08","slug":"customize-checkbox-radio-button-inputs-css","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/","title":{"rendered":"Customize Checkbox and Radio Inputs with CSS"},"content":{"rendered":"

Checkboxes and radio buttons are the common elements to use in any web form. Generally, browser’s default style is used for checkbox and radio button. But if you want to make a nice UI web form and match with the web page layout, form element customization is required.<\/p>\n

Customize checkbox<\/b> and radio button overrides browser’s default style and changes the look of checkbox and radio fields. You can easily customize checkbox and radio inputs with CSS without using JavaScript code. In this tutorial, we will show you how to customize checkbox and radio inputs with CSS.<\/p>\n

Customize Checkbox with CSS<\/h2>\n

The following example code creates custom checkboxes using CSS.<\/p>\n

HTML Code:<\/b>
\nThe following HTML defines checkbox form inputs.<\/p>\n

<label<\/span> class<\/span>=\"checkbox\"<\/span>>One\r\n    <input<\/span> type<\/span>=\"checkbox\"<\/span> checked<\/span>=\"checked\"<\/span>>\r\n    <span<\/span> class<\/span>=\"check\"<\/span>><\/span<\/span>>\r\n<\/label<\/span>>\r\n<label<\/span> class<\/span>=\"checkbox\"<\/span>>Two\r\n    <input<\/span> type<\/span>=\"checkbox\"<\/span>>\r\n    <span<\/span> class<\/span>=\"check\"<\/span>><\/span<\/span>>\r\n<\/label<\/span>>\r\n<label<\/span> class<\/span>=\"checkbox\"<\/span>>Three\r\n    <input<\/span> type<\/span>=\"checkbox\"<\/span>>\r\n    <span<\/span> class<\/span>=\"check\"<\/span>><\/span<\/span>>\r\n<\/label<\/span>>\r\n<label<\/span> class<\/span>=\"checkbox\"<\/span>>Four\r\n    <input<\/span> type<\/span>=\"checkbox\"<\/span>>\r\n    <span<\/span> class<\/span>=\"check\"<\/span>><\/span<\/span>>\r\n<\/label<\/span>>\r\n<\/pre>\n
CSS Code:<\/b>
\nUse the following CSS to override browser’s default style with the custom checkbox.<\/p>\n
\/* custom checkbox *\/<\/span>\r\n.checkbox<\/span> {\r\n    display<\/span>:<\/span> block<\/span>;\r\n    position<\/span>:<\/span> relative<\/span>;\r\n    padding-left<\/span>:<\/span> 35px<\/span><\/span>;\r\n    margin-bottom<\/span>:<\/span> 12px<\/span><\/span>;\r\n    cursor<\/span>:<\/span> pointer<\/span>;\r\n    font-size<\/span>:<\/span> 22px<\/span><\/span>;\r\n    -webkit-user-select:<\/span> none<\/span>;\r\n    -moz-user-select:<\/span> none<\/span>;\r\n    -ms-user-select:<\/span> none<\/span>;\r\n    user-select:<\/span> none<\/span>;\r\n}\r\n\r\n\/* hide the browser's default checkbox *\/<\/span>\r\n.checkbox<\/span> input<\/span> {\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    opacity<\/span>:<\/span> 0<\/span>;\r\n    cursor<\/span>:<\/span> pointer<\/span>;\r\n}\r\n\r\n\/* create custom checkbox *\/<\/span>\r\n.check<\/span> {\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    top<\/span>:<\/span> 0<\/span>;\r\n    left<\/span>:<\/span> 0<\/span>;\r\n    height<\/span>:<\/span> 25px<\/span><\/span>;\r\n    width<\/span>:<\/span> 25px<\/span><\/span>;\r\n    background-color<\/span>:<\/span> #eee<\/span>;\r\n    border<\/span>:<\/span> 1px<\/span><\/span> solid<\/span> #ccc<\/span>;\r\n}\r\n\r\n\/* on mouse-over, add border color *\/<\/span>\r\n.checkbox<\/span>:hover<\/span> input<\/span> ~ .check<\/span> {\r\n    border<\/span>:<\/span> 2px<\/span><\/span> solid<\/span> #2489C5<\/span>;\r\n}\r\n\r\n\/* add background color when the checkbox is checked *\/<\/span>\r\n.checkbox<\/span> input<\/span>:checked<\/span> ~ .check<\/span> {\r\n    background-color<\/span>:<\/span> #2489C5<\/span>;\r\n    border<\/span>:<\/span>none<\/span>;\r\n}\r\n\r\n\/* create the checkmark and hide when not checked *\/<\/span>\r\n.check<\/span>:after<\/span> {\r\n    content<\/span>:<\/span> \"\"<\/span>;\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    display<\/span>:<\/span> none<\/span>;\r\n}\r\n\r\n\/* show the checkmark when checked *\/<\/span>\r\n.checkbox<\/span> input<\/span>:checked<\/span> ~ .check<\/span>:after<\/span> {\r\n    display<\/span>:<\/span> block<\/span>;\r\n}\r\n\r\n\/* checkmark style *\/<\/span>\r\n.checkbox<\/span> .check<\/span>:after<\/span> {\r\n    left<\/span>:<\/span> 9px<\/span><\/span>;\r\n    top<\/span>:<\/span> 5px<\/span><\/span>;\r\n    width<\/span>:<\/span> 5px<\/span><\/span>;\r\n    height<\/span>:<\/span> 10px<\/span><\/span>;\r\n    border<\/span>:<\/span> solid<\/span> white<\/span>;\r\n    border-width<\/span>:<\/span> 0<\/span> 3px<\/span><\/span> 3px<\/span><\/span> 0<\/span>;\r\n    -webkit-transform:<\/span> rotate(45deg<\/span><\/span>);\r\n    -ms-transform:<\/span> rotate(45deg<\/span><\/span>);\r\n    transform:<\/span> rotate(45deg<\/span><\/span>);\r\n}\r\n<\/pre>\n
Customize Radio Button with CSS<\/h2>\n
The following example code creates custom radio buttons using CSS.<\/p>\n
HTML Code:<\/b>
\nThe following HTML defines radio form inputs.<\/p>\n
<label<\/span> class<\/span>=\"radio\"<\/span>>One\r\n    <input<\/span> type<\/span>=\"radio\"<\/span> checked<\/span>=\"checked\"<\/span> name<\/span>=\"radio\"<\/span>>\r\n    <span<\/span> class<\/span>=\"check\"<\/span>><\/span<\/span>>\r\n<\/label<\/span>>\r\n<label<\/span> class<\/span>=\"radio\"<\/span>>Two\r\n    <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"radio\"<\/span>>\r\n    <span<\/span> class<\/span>=\"check\"<\/span>><\/span<\/span>>\r\n<\/label<\/span>>\r\n<label<\/span> class<\/span>=\"radio\"<\/span>>Three\r\n    <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"radio\"<\/span>>\r\n    <span<\/span> class<\/span>=\"check\"<\/span>><\/span<\/span>>\r\n<\/label<\/span>>\r\n<label<\/span> class<\/span>=\"radio\"<\/span>>Four\r\n    <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"radio\"<\/span>>\r\n    <span<\/span> class<\/span>=\"check\"<\/span>><\/span<\/span>>\r\n<\/label<\/span>>\r\n<\/pre>\n
CSS Code:<\/b>
\nUse the following CSS to override browser’s default style with custom radio button.<\/p>\n
\/* custom radio *\/<\/span>\r\n.radio<\/span> {\r\n    display<\/span>:<\/span> block<\/span>;\r\n    position<\/span>:<\/span> relative<\/span>;\r\n    padding-left<\/span>:<\/span> 35px<\/span><\/span>;\r\n    margin-bottom<\/span>:<\/span> 12px<\/span><\/span>;\r\n    cursor<\/span>:<\/span> pointer<\/span>;\r\n    font-size<\/span>:<\/span> 22px<\/span><\/span>;\r\n    -webkit-user-select:<\/span> none<\/span>;\r\n    -moz-user-select:<\/span> none<\/span>;\r\n    -ms-user-select:<\/span> none<\/span>;\r\n    user-select:<\/span> none<\/span>;\r\n}\r\n\r\n\/* hide the browser's default radio button *\/<\/span>\r\n.radio<\/span> input<\/span> {\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    opacity<\/span>:<\/span> 0<\/span>;\r\n    cursor<\/span>:<\/span> pointer<\/span>;\r\n}\r\n\r\n\/* create custom radio *\/<\/span>\r\n.radio<\/span> .check<\/span> {\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    top<\/span>:<\/span> 0<\/span>;\r\n    left<\/span>:<\/span> 0<\/span>;\r\n    height<\/span>:<\/span> 25px<\/span><\/span>;\r\n    width<\/span>:<\/span> 25px<\/span><\/span>;\r\n    background-color<\/span>:<\/span> #eee<\/span>;\r\n    border<\/span>:<\/span> 1px<\/span><\/span> solid<\/span> #ccc<\/span>;\r\n    border-radius<\/span>:<\/span> 50%<\/span><\/span>;\r\n}\r\n\r\n\/* on mouse-over, add border color *\/<\/span>\r\n.radio<\/span>:hover<\/span> input<\/span> ~ .check<\/span> {\r\n    border<\/span>:<\/span> 2px<\/span><\/span> solid<\/span> #2489C5<\/span>;\r\n}\r\n\r\n\/* add background color when the radio is checked *\/<\/span>\r\n.radio<\/span> input<\/span>:checked<\/span> ~ .check<\/span> {\r\n    background-color<\/span>:<\/span> #2489C5<\/span>;\r\n    border<\/span>:<\/span>none<\/span>;\r\n}\r\n\r\n\/* create the radio and hide when not checked *\/<\/span>\r\n.radio<\/span> .check<\/span>:after<\/span> {\r\n    content<\/span>:<\/span> \"\"<\/span>;\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    display<\/span>:<\/span> none<\/span>;\r\n}\r\n\r\n\/* show the radio when checked *\/<\/span>\r\n.radio<\/span> input<\/span>:checked<\/span> ~ .check<\/span>:after<\/span> {\r\n    display<\/span>:<\/span> block<\/span>;\r\n}\r\n\r\n\/* radio style *\/<\/span>\r\n.radio<\/span> .check<\/span>:after<\/span> {\r\n    top<\/span>:<\/span> 9px<\/span><\/span>;\r\n    left<\/span>:<\/span> 9px<\/span><\/span>;\r\n    width<\/span>:<\/span> 8px<\/span><\/span>;\r\n    height<\/span>:<\/span> 8px<\/span><\/span>;\r\n    border-radius<\/span>:<\/span> 50%<\/span><\/span>;\r\n    background<\/span>:<\/span> white<\/span>;\r\n}\r\n<\/pre>\n
Conclusion<\/h2>\n
There are many jQuery plugins are available to customize checkboxes and radio buttons. But it’s always a smart decision to use CSS to customize from input elements. Our example code provides the easiest way to change default style of checkbox and radio inputs. Also, you can easily change the color of custom checkbox and radio button as per your website layout.<\/p>\n","protected":false},"excerpt":{"rendered":"
Checkboxes and radio buttons are the common elements to use in any web form. Generally, browser’s default style is used for checkbox and radio button. But if you want to make a nice UI web <\/p>\n","protected":false},"author":1,"featured_media":3110,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[9],"tags":[310,124,311],"class_list":["post-3109","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-checkbox","tag-css","tag-radio","cat-9-id","has_thumb"],"yoast_head":"\nCustomize Checkbox and Radio Inputs with CSS - CodexWorld<\/title>\n<meta name=\"description\" content=\"Customize checkbox and radio button - Learn how to customize checkbox and radio inputs with CSS. Change default checkbox and radio button using CSS. Example code to customize checkboxes and radio buttons with CSS.\" \/>\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.codexworld.com\/customize-checkbox-radio-button-inputs-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customize Checkbox and Radio Inputs with CSS - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Customize checkbox and radio button - Learn how to customize checkbox and radio inputs with CSS. Change default checkbox and radio button using CSS. Example code to customize checkboxes and radio buttons with CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-26T18:58:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/02\/customize-checkbox-radio-button-inputs-css-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\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.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Customize Checkbox and Radio Inputs with CSS\",\"datePublished\":\"2018-02-26T18:58:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/\"},\"wordCount\":246,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/customize-checkbox-radio-button-inputs-css-codexworld.png\",\"keywords\":[\"checkbox\",\"CSS\",\"radio\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/\",\"name\":\"Customize Checkbox and Radio Inputs with CSS - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/customize-checkbox-radio-button-inputs-css-codexworld.png\",\"datePublished\":\"2018-02-26T18:58:08+00:00\",\"description\":\"Customize checkbox and radio button - Learn how to customize checkbox and radio inputs with CSS. Change default checkbox and radio button using CSS. Example code to customize checkboxes and radio buttons with CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/customize-checkbox-radio-button-inputs-css-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/customize-checkbox-radio-button-inputs-css-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"customize-checkbox-radio-button-inputs-css-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/customize-checkbox-radio-button-inputs-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customize Checkbox and Radio Inputs with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customize Checkbox and Radio Inputs with CSS - CodexWorld","description":"Customize checkbox and radio button - Learn how to customize checkbox and radio inputs with CSS. Change default checkbox and radio button using CSS. Example code to customize checkboxes and radio buttons with CSS.","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.codexworld.com\/customize-checkbox-radio-button-inputs-css\/","og_locale":"en_US","og_type":"article","og_title":"Customize Checkbox and Radio Inputs with CSS - CodexWorld","og_description":"Customize checkbox and radio button - Learn how to customize checkbox and radio inputs with CSS. Change default checkbox and radio button using CSS. Example code to customize checkboxes and radio buttons with CSS.","og_url":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-02-26T18:58:08+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/02\/customize-checkbox-radio-button-inputs-css-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Customize Checkbox and Radio Inputs with CSS","datePublished":"2018-02-26T18:58:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/"},"wordCount":246,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/02\/customize-checkbox-radio-button-inputs-css-codexworld.png","keywords":["checkbox","CSS","radio"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/","url":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/","name":"Customize Checkbox and Radio Inputs with CSS - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/02\/customize-checkbox-radio-button-inputs-css-codexworld.png","datePublished":"2018-02-26T18:58:08+00:00","description":"Customize checkbox and radio button - Learn how to customize checkbox and radio inputs with CSS. Change default checkbox and radio button using CSS. Example code to customize checkboxes and radio buttons with CSS.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/02\/customize-checkbox-radio-button-inputs-css-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/02\/customize-checkbox-radio-button-inputs-css-codexworld.png","width":1366,"height":768,"caption":"customize-checkbox-radio-button-inputs-css-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/customize-checkbox-radio-button-inputs-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Customize Checkbox and Radio Inputs with CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/02\/customize-checkbox-radio-button-inputs-css-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-O9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3109"}],"version-history":[{"count":1,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3109\/revisions"}],"predecessor-version":[{"id":3111,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3109\/revisions\/3111"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3110"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}