{"id":5931,"date":"2015-07-27T12:15:56","date_gmt":"2015-07-27T09:15:56","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5931"},"modified":"2018-01-08T14:15:24","modified_gmt":"2018-01-08T12:15:24","slug":"css-radio-button-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/","title":{"rendered":"CSS Radio Button Example"},"content":{"rendered":"

Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can! The aim of this example is to show the creation, modification and usage of radio buttons using HTML and CSS3.<\/p>\n

Radio buttons make it easier to select an item within a list of items that can be selected, simple as one click. Unlike dropdowns, they are visible and just right for the user to interact in simple ways.<\/p>\n

The input type radio<\/code> is supported by all modern browsers, and even what we’re doing in this tutorial is accessible from any browser as long as we’ll be using CSS3 to style and modify radio buttons, using properties and attributes.
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basic Document Setup<\/h2>\n

Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS3 Radio Button Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
The two sections, HTML and CSS, will be the ones where content is going to be added. Let’s see a basic radio button.<\/p>\n
\r\n<input type=\"radio\">Click me please\r\n<\/pre>\n
Note that radio buttons are created out of input elements in HTML, inputs with a type of radio<\/code>. There’s been no styling on the input we just added on html, so the view in the browser would reflect the default properties that radio buttons have:
\n
\"Basic<\/a>
Basic Radio Button Application<\/figcaption><\/figure>
\nSo that was just a very basic, HTML only based, radio button. Below, we’ll go deeper into styling and creating customized design.<\/p>\n
2. Styling Radio Buttons<\/h2>\n
Whenever you feel even details should be of your own perspective on your site, you’ll be considering creating a custom radio button. Let’s start off with a really cool example of styling radio buttons with different colors, borders and even animations. Look at the code below:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n\r\n<label for=\"radio-one\">\r\n<input type=\"radio\" value=\"radio-one\" name=\"quality\" id=\"radio-one\"> <span>radio one<\/span>\r\n<\/label>\r\n\r\n<label for=\"radio-two\">\r\n<input type=\"radio\" value=\"radio-two\" name=\"quality\" id=\"radio-two\"> <span>radio two<\/span>\r\n<\/label>\r\n\r\n<label for=\"radio-three\">\r\n<input type=\"radio\" value=\"radio-two\"  name=\"quality\" id=\"radio-three\" checked> <span>radio three<\/span>\r\n<\/label>\r\n<\/pre>\n
So, we’ve set up a structure with three radio buttons, each of which is going to have some text next to it as a label.
\nThe CSS would contain the properties to design the radio button before and after being checked (clicked).<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n@import url(http:\/\/fonts.googleapis.com\/css?family=Cabin:700);\r\n\r\n\/* HTML5 Boilerplate radio-one hidden styles *\/\r\n[type=\"radio\"] {\r\n  border: 0;\r\n  height: 1px; margin: -1px;\r\n  padding: 0;\r\n  position: absolute;\r\n  width: 1px;\r\n}\r\n\r\n\/* One radio button per line *\/\r\nlabel {\r\n  display: block;\r\n  cursor: pointer;  \/*hand view when on hover*\/\r\n  line-height: 2.5;\r\n  font-size: 1.5em;\r\n}\r\n\r\n\/* the basic, unchecked style *\/\r\n[type=\"radio\"] + span:before {\r\n  content: '';\r\n  display: inline-block;\r\n  width: 1em;\r\n  height: 1em;\r\n  vertical-align: -0.25em;\r\n  border-radius: 1em;           \/*hard border*\/\r\n  border: 0.125em solid #fff;\r\n  box-shadow: 0 0 0 0.15em #000;   \/*light shadow*\/\r\n  margin-right: 0.75em;\r\n  transition: 0.5s ease all;    \/*animation here*\/\r\n}\r\n\r\n\/* the checked style using the :checked pseudo class *\/\r\n[type=\"radio\"]:checked + span:before {\r\n  background: #33a2c6;\r\n  box-shadow: 0 0 0 0.25em #000;\r\n}\r\n\r\n\/* body attributes here *\/\r\nbody {\r\n  margin: 3em auto;\r\n  max-width: 30em;\r\n  font-family: Cabin, serif;\r\n}\r\n<\/style>\r\n<\/pre>\n
The view we’d get would be pretty impressive:
\n
\"A<\/a>
A Fully Customized Radio Button<\/figcaption><\/figure><\/p>\n
Adittionally, you could have different broder thickness, colors and more, just by changining the values above. Here is what it would look like in some examples.
\n
\"Alternative<\/a>
Alternative Designs for your Radio Button<\/figcaption><\/figure><\/p>\n
Another nice example of a customized radio button is shown below:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div>\r\n  <input type=\"radio\" id=\"radio01\" name=\"radio\" \/>\r\n  <label for=\"radio01\"><span><\/span>Radio Button 1<\/label>\r\n<\/div>\r\n\r\n<div>\r\n <input type=\"radio\" id=\"radio02\" name=\"radio\" \/>\r\n <label for=\"radio02\"><span><\/span>Radio Button 2<\/label>\r\n<\/div>\r\n<\/pre>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\ndiv {\r\n  margin: 0 0 0.75em 0;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n  display: none;\r\n}\r\n\r\ninput[type=\"radio\"] + label {\r\n  color: #292321;\r\n  font-family: Arial, sans-serif;\r\n  font-size: 14px;\r\n}\r\n\r\ninput[type=\"radio\"] + label span {\r\n  display: inline-block;\r\n  width: 19px;\r\n  height: 19px;\r\n  margin: -1px 4px 0 0;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  -moz-border-radius: 50%;\r\n  border-radius: 50%;\r\n}\r\n\r\ninput[type=\"radio\"] + label span {\r\n  background-color: #292321;\r\n}\r\n\r\ninput[type=\"radio\"]:checked + label span {\r\n  background-color: #CC3300;\r\n}\r\n\r\ninput[type=\"radio\"] + label span,\r\ninput[type=\"radio\"]:checked + label span {\r\n  -webkit-transition: background-color 0.4s linear;\r\n  -o-transition: background-color 0.4s linear;\r\n  -moz-transition: background-color 0.4s linear;\r\n  transition: background-color 0.4s linear;\r\n}\r\n<\/style>\r\n<\/pre>\n
This time, the view would be more flat and minimalistic:
\n
\"Yet<\/a>
Yet Another Cool Radio Button<\/figcaption><\/figure><\/p>\n
3. Adding Functionality to the Radio Button<\/h2>\n
Radio buttons are almost always grouped together in groups. Only one radio button within the same form may be selected at a time. The user can switch which radio button is turned on by selecting it with the mouse or keyboard. Other radio buttons in the same group are turned off. A label, specified with the label attribute may be added beside the radio button. Thus, we would have a functional form with radio buttons inside, which would look like this in code:<\/p>\n
\r\n<form action=\"\">\r\n<label for=\"male\">\r\n<input type=\"radio\" name=\"sex\" value=\"male\">Male<br><\/label>\r\n<label for=\"female\">\r\n<input type=\"radio\" name=\"sex\" value=\"female\">Female<\/label>\r\n<\/form>\r\n<\/pre>\n
Well, pretty simple view, we’ve considered only functionality here.
\n
\"Consideri<\/a>
Consideri Functionality when Adding Radio Buttons<\/figcaption><\/figure><\/p>\n
4. Conclusion<\/h2>\n
To conclude, radio buttons are very useful elements of CSS, to get data\/information from the user selection. In most cases, default radio buttons will fit just okay to your needs. However, there might be cases you want to change that creepy style that default holds and unleash your own design concepts. This is often considered when applied on artistic websites, as well as surveying sites because the size and colors need to fit the whole page context.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS3 Radio Button<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can! The aim of this example is to show the creation, modification and usage of radio buttons using HTML and CSS3. Radio buttons make it easier to select an item within a list of items that can be selected, …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5931","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Radio Button Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can! The aim of this example is to show the creation,\" \/>\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.webcodegeeks.com\/css\/css-radio-button-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Radio Button Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can! The aim of this example is to show the creation,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-27T09:15:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:15:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Radio Button Example\",\"datePublished\":\"2015-07-27T09:15:56+00:00\",\"dateModified\":\"2018-01-08T12:15:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/\"},\"wordCount\":642,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/\",\"name\":\"CSS Radio Button Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-07-27T09:15:56+00:00\",\"dateModified\":\"2018-01-08T12:15:24+00:00\",\"description\":\"Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can! The aim of this example is to show the creation,\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Radio Button Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Radio Button Example - Web Code Geeks - 2026","description":"Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can! The aim of this example is to show the creation,","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.webcodegeeks.com\/css\/css-radio-button-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Radio Button Example - Web Code Geeks - 2026","og_description":"Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can! The aim of this example is to show the creation,","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-07-27T09:15:56+00:00","article_modified_time":"2018-01-08T12:15:24+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Radio Button Example","datePublished":"2015-07-27T09:15:56+00:00","dateModified":"2018-01-08T12:15:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/"},"wordCount":642,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/","name":"CSS Radio Button Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-07-27T09:15:56+00:00","dateModified":"2018-01-08T12:15:24+00:00","description":"Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can! The aim of this example is to show the creation,","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-radio-button-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Radio Button Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=5931"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5931\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}