--- title: Style custom radio buttons on HubSpot forms description: This post contains CSS styling for customising radio buttons on forms on your HubSpot website. image: https://www.stephanieogaygarcia.com/hubfs/Website%20Imagery/Stephanie%20OGay%20Garcia%20-%20HubSpot%20CMS%20Designer%20and%20Developer%20L.png --- [Skip to Content](https://www.stephanieogaygarcia.com/hubspot-website-development/style-custom-radio-buttons-on-hubspot-forms#main-content) [![Stephanie O'Gay Garcia](https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg "Stephanie O'Gay Garcia")](https://www.stephanieogaygarcia.com/) Open Navigation - [About](https://www.stephanieogaygarcia.com/about) - [Services](https://www.stephanieogaygarcia.com/services) - [Products](https://www.stephanieogaygarcia.com/shop) - [Work](https://www.stephanieogaygarcia.com/portfolio-work) - [Blog](https://www.stephanieogaygarcia.com/hubspot-website-development) - [Contact](https://www.stephanieogaygarcia.com/contact) - [About](https://www.stephanieogaygarcia.com/about) - [Services](https://www.stephanieogaygarcia.com/services) - [Products](https://www.stephanieogaygarcia.com/shop) - [Work](https://www.stephanieogaygarcia.com/portfolio-work) - [Blog](https://www.stephanieogaygarcia.com/hubspot-website-development) - [Contact](https://www.stephanieogaygarcia.com/contact) [HubSpot Sprocket Icon HubSpot Website Development ](https://www.stephanieogaygarcia.com/hubspot-website-development) [forms](https://www.stephanieogaygarcia.com/hubspot-website-development/tag/forms) # Style custom radio buttons on HubSpot forms Technical Difficulty: Advanced Written by [ Stephanie O'Gay Garcia ](https://www.stephanieogaygarcia.com/hubspot-website-development/author/stephanie-ogay-garcia) First Published: October 28, 2019 Last Updated: October 28, 2019 ⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! *(Last updated: October 28, 2019)* When you use a Form module on your HubSpot website, the markup for your radio buttons will look something like this: ![HubSpot subscribe form markup](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20Website%20Development%20Post%20Images/HubSpot%20subscribe%20form%20markup.jpg?width=1313&name=HubSpot%20subscribe%20form%20markup.jpg) For simplicity, the above is a form module within a "page-center" container using only the default styling from the original [HubSpot Boilerplate CSS](https://designers.hubspot.com/docs/tools/boilerplate-css).  ## Stack the radio buttons horizontally One thing you may want to do is to stack the radio buttons from left to right. You can do this using Flexbox, like this:  `ul.inputs-list.multi-container {   display: flex;   flex-direction: row;   align-items: center; }` ![Stack form radio buttons using flexbox](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20Website%20Development%20Post%20Images/Stack%20form%20radio%20buttons%20using%20flexbox.jpg?width=350&name=Stack%20form%20radio%20buttons%20using%20flexbox.jpg) or using a Float (set a clear to the next field or button to prevent it from stacking up as well):  `ul.inputs-list.multi-container li {   float: left; } .hs_submit.hs-submit {   clear: both; }` ![Stack form radio buttons using float](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20Website%20Development%20Post%20Images/Stack%20form%20radio%20buttons%20using%20float.jpg?width=350&name=Stack%20form%20radio%20buttons%20using%20float.jpg)   **Note:** both of the snippets above will style all radio and checkbox elements on your site, so you'll probably want to add a more specific class to that to target specific forms. ## Change the radio button styling Another thing you may want to do is set a different styling to your radio button. Because you can't style radio buttons this is usually done by hiding the actual radio button and adding in a fake one using a span in the markup (see an example [here](https://www.w3schools.com/howto/howto_css_custom_checkbox.asp)).  In HubSpot the radio button markup looks like this (I've stripped it down for simplicity):  `` We can use CSS to hide the default input element above and then use pseudo-selectors on the span element to create the radio button and the circle that appears on click:  `/* Custom Input */ ul.inputs-list.multi-container li.hs-form-radio label {   position: relative; } ul.inputs-list.multi-container li.hs-form-radio label span {   display: inline-block;   margin-left: 40px; /* Width of the new radio select and any additional spacing on the left */   margin-right: 16px; /* Additional spacing on the right */ } /* Hide the original radio select */ ul.inputs-list.multi-container li.hs-form-radio label input {   height: 24px;   left: 0;   opacity: 0;   position: absolute;   top: 0;   width: 24px; } /* Add new radio select */ ul.inputs-list.multi-container li.hs-form-radio label span::before {   border: 2px solid;   content: "";   height: 24px;   left: 0;   position: absolute;   top: 0;   width: 24px;   border-radius: 50%; } /* Style new checked item */ ul.inputs-list.multi-container li.hs-form-radio label span::after {   content: "";   opacity: 0;   border: 7px solid;   border-radius: 50%;   position: absolute;   left: 5px;   top: 5px;   transition: opacity 0.2s ease-in-out; } /* Show when checked */ ul.inputs-list.multi-container li.hs-form-radio label input:checked + span::after {   opacity: 1; } /* Style when focused */ ul.inputs-list.multi-container li.hs-form-radio label input:focus + span::after {   box-shadow: 0 0 0 3px #4D90FE;   outline: 3px solid transparent; /* For Windows high contrast mode. */ }` The above snippet looks something like this which you can preview [here](https://www.stephanieogaygarcia.com/example-custom-radio-select-buttons):  ![HubSpot blog subscribe form with custom radio select buttons](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20blog%20subscribe%20form%20with%20custom%20radio%20select%20buttons.jpg?width=350&name=HubSpot%20blog%20subscribe%20form%20with%20custom%20radio%20select%20buttons.jpg) You can play around with the above styling to customise this further. Edit the height and width from 24px to increase or decrease the input size, update the after pseudo-element's left and top position and border size to increase or decrease it accordingly, update the focus style from blue to another colour or effect... etc.   **To learn about customising checkboxes on HubSpot, you can read [this post](https://www.stephanieogaygarcia.com/hubspot-website-development/style-custom-checkboxes-on-hubspot-forms).** If you found this helpful, buy me a coffee! ❤️ ←  Previous Article [Remove the wrapper from a field in a HubSpot custom module](https://www.stephanieogaygarcia.com/hubspot-website-development/remove-the-wrapper-from-a-field-in-a-hubspot-custom-module) Next Article  → [Style custom checkboxes on HubSpot forms](https://www.stephanieogaygarcia.com/hubspot-website-development/style-custom-checkboxes-on-hubspot-forms) Contact ## Get help from a HubSpot CMS Expert - Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules - Technical support and guidance on the HubSpot CMS [ Tell me about your project ](https://www.stephanieogaygarcia.com/project-details) ##### Contact Need help with a HubSpot CMS project? Get in touch! [Email](mailto:stephanie@stephanieogaygarcia.com) | [Contact](https://www.stephanieogaygarcia.com/contact) ##### About - [ About ](https://www.stephanieogaygarcia.com/about) - [ Portfolio ](https://www.stephanieogaygarcia.com/portfolio-work) - [ LinkedIn ](https://www.linkedin.com/in/stephanieogaygarcia/) - [ Facebook ](https://www.facebook.com/stephanieogaygarcia) - [ Instagram ](https://www.instagram.com/stephanieogaygarcia/) ##### Services - [ HubSpot Website Development ](https://www.stephanieogaygarcia.com/services/hubspot-website-development) - [ HubSpot CMS Technical Support ](https://www.stephanieogaygarcia.com/services/hubspot-cms-technical-support) - [ Custom HubSpot CMS Themes ](https://www.stephanieogaygarcia.com/custom-hubspot-cms-hub-themes) - [ Pricing ](https://www.stephanieogaygarcia.com/services#pricing) ##### Latest Articles - [How to add an llms.txt page to your HubSpot website](https://www.stephanieogaygarcia.com/hubspot-website-development/add-an-llmstxt-page-to-your-hubspot-website) - [Switch an existing HubSpot custom module from global to local](https://www.stephanieogaygarcia.com/hubspot-website-development/switch-an-existing-hubspot-custom-module-from-global-to-local) - [Overriding HubSpot's new forms styling from theme settings](https://www.stephanieogaygarcia.com/hubspot-website-development/overriding-hubspots-new-forms-styling-from-theme-settings) - [All Articles](https://www.stephanieogaygarcia.com/hubspot-website-development) --- Copyright © 2018 - 2026 Stephanie O'Gay Garcia. All Rights Reserved. Freelance HubSpot CMS Developer based in Toronto, Canada 🇨🇦 [Terms of Service](https://www.stephanieogaygarcia.com/terms-of-service) | [Website Terms of Use](https://www.stephanieogaygarcia.com/website-terms-of-use) | [Privacy](https://www.stephanieogaygarcia.com/privacy-policy) | [Cookies](https://www.stephanieogaygarcia.com/cookie-policy) | [LLMs](https://www.stephanieogaygarcia.com/llms.txt) Scroll to Top ```json { "@context" : "https://schema.org", "@id" : "https://www.stephanieogaygarcia.com/#person", "@type" : "Person", "description" : "Freelance HubSpot CMS Developer specializing in custom HubSpot website development, themes, templates, and bespoke modules for small–mid sized B2B and SaaS companies.", "image" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg", "jobTitle" : "Freelance HubSpot CMS Developer", "knowsAbout" : [ "HubSpot CMS", "HubSpot themes", "HubSpot templates", "HubSpot modules", "HubDB", "Website migrations to HubSpot CMS", "Figma to HubSpot implementation" ], "name" : "Stephanie O'Gay Garcia", "sameAs" : [ "https://www.linkedin.com/in/stephanieogaygarcia/", "https://www.facebook.com/stephanieogaygarcia", "https://www.instagram.com/stephanieogaygarcia/", "https://ecosystem.hubspot.com/marketplace/solutions/stephanie-ogay-garcia/" ], "url" : "https://www.stephanieogaygarcia.com/", "worksFor" : { "@id" : "https://www.stephanieogaygarcia.com/#organization" } } ``` ```json { "@context" : "https://schema.org", "@id" : "https://www.stephanieogaygarcia.com/#organization", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "IE", "addressLocality" : "Dublin", "postalCode" : "A94" }, "contactPoint" : { "@type" : "ContactPoint", "areaServed" : "Worldwide", "availableLanguage" : [ "en", "es" ], "contactType" : "sales", "email" : "stephanie@stephanieogaygarcia.com" }, "description" : "Portfolio and business site of freelance HubSpot CMS Developer Stephanie O'Gay Garcia, based in Dublin, Ireland.", "logo" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg", "name" : "Stephanie O'Gay Garcia", "sameAs" : [ "https://www.linkedin.com/in/stephanieogaygarcia/", "https://www.facebook.com/stephanieogaygarcia", "https://www.instagram.com/stephanieogaygarcia/", "https://ecosystem.hubspot.com/marketplace/solutions/stephanie-ogay-garcia/" ], "url" : "https://www.stephanieogaygarcia.com/" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://www.stephanieogaygarcia.com/#website", "@type" : "WebSite", "name" : "Stephanie O’Gay Garcia – Freelance HubSpot CMS Developer", "publisher" : { "@id" : "https://www.stephanieogaygarcia.com/#organization" }, "url" : "https://www.stephanieogaygarcia.com/" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Stephanie O'Gay Garcia", "url" : "https://www.stephanieogaygarcia.com/hubspot-website-development/author/stephanie-ogay-garcia" }, "dateModified" : "2019-10-28T18:58:40.181Z", "datePublished" : "2019-10-28T15:11:52.000Z", "headline" : "Style custom radio buttons on HubSpot forms", "mainEntityOfPage" : { "@id" : "https://www.stephanieogaygarcia.com/hubspot-website-development/style-custom-radio-buttons-on-hubspot-forms", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg" } } } ```