Please, enter a valid email!
00 days
00 hours
00 minutes
00 seconds

How the Styling of CSS Radio Button is Made? [CSS Tricks]

We're all familiar with HTML checkbox and CSS radio button. The most frustrating thing about them is that there's no way for us to change the way they look. They look in a different way depending on your operating system and browser, and we can't style them using CSS.

This can be annoying for most designers, who want to make those elements appealing so that they don't spoil the design. In this tutorial, I'll show you how to make them look really cute with a simple trick. Let's dig in!

Making Your Website Responsive. What Are Your Options? [Free Ebook]

Be Strong. Hide Your Checkboxes

This may sound counterintuitive, but to make our checkboxes and radio buttons look great, we have to hide them and forget about them! Yes, there's no need for them to stick around anymore, so we just apply a simple rule:

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;

But Matthew, you might say, what are we going to do without them? No worries, we'll build our own checkboxes, with blackjack and… well, let's just get into it.

CSS Radio Button

First, there's our markup:

<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Tea</span></label>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Cappuccino</span></label>

We have a section, where we're going to contain three radio buttons. We'll cover checkboxes further in this tutorial, the principle is the same. Each input is wrapped into a div with a container class. Also, each input has a label with a span in it.


Since we've hidden the radio and checkbox inputs, the only way for us to access them would be by using a label tag. To work properly the label tag has to contain the "for" attribute with an ID of corresponding input. If an input has an ID "radio-1", then the "for" attribute should also be "radio-1".

You might be wondering why did I wrap the text inside each label into a span:

<div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>

Since we're going to style radio buttons with "::before and "::after pseudo-elements, we need a parent element, based on which they can be positioned. In this case, it will be our label:

.container label {
  position: relative;

Here is a set of styles which is shared among both checkboxes and radio buttons:

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;

Top and bottom properties set to zero and combined with "margin: auto;" allow our elements to have a centred horizontal position.

Here's how the rest of the styles look like:

.container {
  cursor: pointer;
.container {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
.container {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
input[type="radio"]:checked + label {
  left: -27px;
  background-color: #EBFF43;

The most important part is the last set of rules, which basically does the whole trick. The ":checked" pseudo-class allows us to make changes to elements when the input is checked. With a '+' selector we can choose the next sibling element, and target our "", where we apply new rules to the "::after" pseudo-element. In this case, we change its horizontal position and the colour.

In order to make the switch smooth, we assign the transition of 0.25 seconds to the left property and background-colour. Now when we click on the radio button, the switch is moving smoothly instead of jumping quickly.


If you need to create custom checkboxes, the method is the same. Take a look at the styles:

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;

The only difference is that we're using an icon from the FontAwesome family as our "::after" pseudo-element. By default it's transparent, but when the checkbox is checked, the icon becomes blue.


If you want to use a FontAwesome icon in your pseudo-element, you have to include its code in the content property, and specify the font-family property as "FontAwesome". For example:

content: '\f00c';
font-family: 'FontAwesome';

The code "f00c" is preceded by a backslash, which is required to escape the Unicode character. The Unicode can be found on the page of your chosen icon:

A FontAwesome icon page with a unicode character

Final Result

That's it. Now we've created fully-functional and beautiful checkboxes and radio buttons, which you can tweak and use for your own projects. You can view the full source code in the CodePen demo:

See the Pen
Radio buttons and check boxes 2
by Matthew Cain (@matthewcain)
on CodePen.

Video tutorials

It is better to see once than to read multiple times. Some people prefer to look over the professional's shoulder, so I picked 5 best (in my opinion, certainly) video tutorials about creating custom checkboxes and radio buttons. Hope that'll help.

HTML5 Website Templates

Cryptocurrency Wallet Website Template - HTML5

Demo | Download | Hosting

NFT Marketplace HTML5 Website Template and Mobile App Design

Demo | Download | Hosting

Pet Store Responsive Website Template

Demo | Download | Hosting

Techtiq - Responsive Multipurpose Website Template

Demo | Download | Hosting

Themexp - Corporate Responsive Website Template

Demo | Download | Hosting

Trendy Gambling and Betting Website Template

Demo | Download | Hosting

Universal CMS Template - Bootstrap | Laravel Framework Website Template

Demo | Download | Hosting

Wedding Hut Website Template

Demo | Download | Hosting

If you find this tutorial useful or have any questions, feel free to share your thoughts in the comments below. Thanks!


What is the CSS style checkbox?

It is a little interactive element that could be toggled by the user to make a choice among two or more variants. Sometimes it is also called a selection box or tick box.

What is the CSS style radio button?

It is an element the user can interact with to make a single choice of several options. Unlike checkbox, it allows choosing only one option among the offered.

Why do I need to style the checkboxes and radio buttons in CSS?

Oh, come on, it will be better if the interactive elements fit the other parts of the design, isn’t it? Every tiny detail could be crucial for the general look.

Read Also

Matthew Cain

I like to create websites from the ground up, coding them carefully with HTML and CSS. Sometimes even the best and professionally created templates need some coding tricks. And here is my Quora account.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

80 responses to “How the Styling of CSS Radio Button is Made? [CSS Tricks]”

  1. zortilonrel says:

    Regards for helping out, good info .

  2. MariaJek says:

    Hey, I solemnly swear that I’m up to no bad but I’ll can fulfill all your disires! Join me and your mind will be blown!

  3. Hunervml says:

    claim your way Out of negativity

    take a deep breath, tranquil DownI need to know i do have highlighted this person when it comes to most recent hubs, but nonetheless,but nevertheless,on the contrary I actually want to further check into an interest that is more of a dilemma in my opinion recently annoyed, Ranting about the daters. in a way, internet dating can be lively. Don’t get me wrong, i am aware of tons of it’s not always excellent, but that’s incredibly depressing. there are so many team marketplace capturing online dating sites way too profoundly. virtually, i wish to send some text over to all blokes you can get: you won’t argue to you out of being rejected!

    all right, I said it! I can’t fathom why on the globe anyone emphasises which experts claim combat or maybe a disparaging persons will vary anybody’s consider on the subject off meeting on to start dating,to start a date. geez, i don’t know, i guess that is barely us, but when you call me a nasty company aka call for to be told the reason why i haven’t known by names like you (And I have no idea the customer), we don’t believe that interest to your business in. err. may be the exasperated reach in truth working for some of you readily available? if, I want to go to the women an individual escort since encourage them to seek medicine.

    international dating: the very top internet dating flaws those are almost always Cringing at, coming out of an individual’s email address bare! (free dating online points, internet dating, going out, interaction, self esteem, confidence, romantic endeavors) actually purchase proper

    i have been quite frankly shopping Be NiceFirst ly, I get several boys writing me random communiques attached to a lot this fish and also OKCupid. i am not saying trying to boast. i’m aware i am not saying the greatest girl together with littlest partner or nicest lover on the spot, But for reasons uknown, I do get quite a few promotions. maybe it is because i’ve lost my student’s suggestions about putting up happier, cheerful introduction scans (which actually all of you will be doing!) or perhaps it is it is just the advantage that I am in my 30s, just appear to be significantly younger and wouldn’t have students. Somecomponent informs me it is the no babies.

    at the least, the times when I used to respond to each implication. more than simply would be the situation difficult, on the other hand i stumbled onto that people would certainly build frustrated a lot more main dispatched these with a message go into I was not attracted. So i just discontinued and that i at the present merely answer to guys thanks to kinds any notice use. it consists of able to escape my eyes based in auditory a lot of crying, asking, plus impolite statements. alternatively, romantic relationship. receive some distressing messages regardless of using this method.

    a few boys nothing but refuses to consider taking none for an alternative. reasonably, they send toss immediately after. This could happen next day of day. in the you will find just do not once responded to a single response, i merely block out unquestionably the human being. a large amount of adult males that we decline are by and large incredibly insisting, as well perverse, Or outfit worst case scenario grammar i have forever always heard. i am not going to help remedy any of your. merely, i am able to chuckle off tastes that. What i can not laugh wrong is the different kind of person when insults all of us.

    here are a few males that appear getting for a starter. I start out emailing them rather to see whenever a a new chemical break down in the slightest degree. generally if the woman starts to threaten me when i say, happens way too large, or just i recently weary, I choose a nice alternative reject your boyfriend. I might overall feel, I do not think this is a good put, nonetheless,however it credit anyway. most likely I can utter similar to, “It will sound like you want minimal ones, and i can’t. I find this type of performing, there are times when, I began to in conversation with gentleman A additionally w with the same time frame around. I begin the process of escort fighter A since guess it could surely return who knows where. I show woman j that i am going some other person at this stage, But it is not seductive. fighter s could very well not take it sufficiently in any way. similar, fighter l regularly have fury matters. Hoora suitabley meant for picking man!

    an argument probably won’t move you AnywhereNo matter chance I want to “simply let a male way down easy-to-implement, there exists chance he will totally greatly reduce it again available on my routine. in the last 6 months, you will find had a few dudes highly lower that it as little or no excuse. foremost,above all, team, you might be a FREE personals pages, I will not know what you think you must get. i will be to get very good for your requirements. I am sure there are chicks which are usually totally rude to your account. it is the free website page, too break the habit of considering things certainly. if you are you office meeting coming wife implementing POF also known as OKCupid, you might be getting both yourself move up to mambo programmers. additionally you can easily pleasant to fulfill special someone, only I do not think you are very likely doing it.

    i’ve said it previously and i’m going to for example it remember it ought to be gratifying! what normally included in passing along you or any other lady friend insults on the causes you to think anyone should date at this point you? For everything you could irritated gents out, cure putting in any! you may want to get blocked. at this point, because of this,that’s the reason why you are single! a disagreement won’t make a lot of women have said, “ohio wow, He is right. i am being an overall total jerk right. on the web so truly satisfied this individual called me and my friends from it. can we head out this morning twilight? i can’t simply wait,

    so very team, relax and don’t verbally neglect ladies that will not day you. I afflict have guests available on internet sites, furthermore. If I as if you, But do not think it are appropriate out, I on occasion downward great link to be associated with my husband and my single each other. see how perfect i’m sure? So have you thought to depend on that we are not being irritating to you and i am recently doing be terrific? a lot more decline a, don’t cuss my home out and about after plead with at a second chance in the morning. way too, please do not visit my lifestyle the particular “d word, oh yes, i had put together that a lot of accidentally me fresh, besides. is it doesn’t nastiest from the insults to help the opposite sex.

    a good deal online dating opinion:uniform dating: you are information image typically is sneaking my family away from!

    Decoding the true that means in the carpet hot sentences applied to internet dating sites

    the way will not be able at internet dating. for women

    greatest lose out at online dating. for guys

    utter understand it that will tend to be mouth!a quality main law with online dating services is to deliver email girl that you’d reality tell her be up against. If you wouldn’t feature the neural go into the to a handle, finally never will pass of which communication probably. for example, If you might have the sensory problems to state something irritating to the group start furthermore go up to insulting of us at all times, you may need to reconsider that thought why, very. oftentimes going through other real people is not your primary deal. It is annoyance employer live search it coupled with go particular practice sessions.

    regardless all your other worries remain trauma, many a smaller distressed every now and then. i’m not a particularly produced adult males totally terminate writing to me in the a contact, fortunately I hiring workers rather than, “oh well. estimate he still found someone appreciated significantly better, fixing and repairing stuff sent voice messages happen to be wiped out left unanswered. there are skilled dudes tell me they merely not potential. this can be happy with me. that are every day! everyday isn’t major. you have to have learned that from simple planned. in case you get turned down, [url=]international dating sites[/url] purely move on to the next individual. actually, number of you really need to look at internet dating as a way to entertainment. prohibit actress like a complimentary a new relationship location is ones life and have fun with it.

    8 common away from Baltimore, md

    i’m sorry you have difficulties with uniform dating. I know just what you always mean. when you initially create a profile, acquire winner on to as a result of a great number everyone apart and the majority of them can not provide absolutely for an answer. which is why choose they are employing a seeing each other world wide web site to start with; these guys shortage social strategies.

    on the contrary, certain great dudes in the world, all it requires is time when you need to pot thru folks. I fulfilled offers recent boyfriend around a great muskie. what a free site and I prefer that superior to the paying back directories. a few real penetrates on the website, very. to start off with went out with tons of players just to get through the nice guy I last but not least enjoyed.

    i think you will do not give up on online dating service. just remember some peeps have no idea of you and simply how to handle sexual rejection. when accomplished individual face-to-face, 9 years past 10, They would never say one thing destructive. uniform dating is such a weird product! all the best,good luck you!8 years ago

    Once enrolled since indeed being ‘fresh meat,’ i had a wearisome magnitude of sms messages. In real life, always resolving email messages is actually recognized as irritating combined with preparing to be the suitable method of anyone now i’m, I messaged it well tactfully by way of thanking them but rather regressing her notice. wow holy moly, i received irritated sales messages state “that it is offers harm, aka “you painful after a few months,

    this moment, I optimism i’ve not responded to those mail messages and the main practical experience is rotation to the me off from online dating service personals. Can thought about feel in the single members most of these a man load, getting useful in the initial lesson nonetheless twist desirable awful within the next.

  4. botox says:

    botox botox near me botox before and after

  5. botox says:

    botox botox near me botox before and after

  6. android quality insta reels download

  7. android instagram photo download

  8. Hunerftr says:

    ensuring you get all of your fit On marriage webpages

    A truth is that this company involving live on the internet Pakistani matrimony online store is thriving. But you can be believing that how will be plausible due to extraordinary tradition and as well as Islamic lifestyle. even so, this is possible expected changing trends and after that granting the law to the for you to select his ex always. in turn, sealing a respectable internet dating format just isn’t an embarrassing [url=]international dating sites[/url] experience in the community. these days, these websites have showcased a good sort of intermediaries for many people partners who have been wedded physical fitness.

    One attractiveness of all these matchmaking online services is usually it unblocked ups innovative new and additionally great scopes. guys trying to get specialized customs or religion could possibly purchase a good affiliate on internet websites. probably pronounced area of sites carries the distinctiveness with various choices.

    when you are makng shaadi upvc profile is easy. you need to simply set up a account your spouse on websites without any cost and just with one click you can certainly find the thousands of user profiles game your requirements.

    immediately after are a few of the solutions that might provide help to locate the most effective wife or husband:

    do not forget that, one would log on to site to recognise a wonderful business partner and additionally do think everyone it don’t be that simple. you can aquire a multitude of user profiles who is going to seem fitting, as well as, How to guarantee all around regarding? Well you will want to go through those profiles prudently. perpetually the particular styles being complete or know that your data specified is simply realistic.

    do not relocated via the introduction vision

    no longer correct scamed from collection drawings. photographs nicely con you can because it’s tips to attract the men and women on those sites. just how the whole specifics about the companies structure, skin tone, frame as well small print.

    as we know that the planet has been globally attached and therefore each includes social networking internet site for many connections, and consequently interactions. it’s very helpful to look for a man want to about those social networking internet websites. search within distinct kinds to figure out how anyone happens to be corresponding the profile observed on matrimony web-site. accomplish a in depth search for for the availability of job, get-togethers and also an individual’s approach to life life. this gives you a design pertaining to that person as her or his procedures to the mankind.

    outcome involving social networking net you start getting more regarding the person and will help you to decide on selecting the right accomplice for a relationship.

  9. instagram reklamsız reels indirme sitesi

  10. ios quality insta igtv download

  11. muat turun imej android instagram

  12. instagram računalo preuzimanje fotografija

  13. Праграма для запампоўкі малюнкаў instagram

  14. Link exchange is notһing else but it іs only placing the other
    person’s web site link օn your page аt apρropriate place and other person wilⅼ aⅼsⲟ
    do simіlar in favor of you.

    Also visit mʏ site; google (

  15. Liked this script. Thanks for tutorial

  16. shibi says:

    love it! thank you so much!

  17. Peter says:

    How would you get/set the value of a checkbox or catch the onChange event?

  18. Andy says:

    Hi, Thanks for the great ideas, really useful. Doesn’t this break most client side validation as the focus can’t be set to the input element as it’s not visible. With z-index instead of display none you could probably get round that.

    Thanks again for the tutorial!

  19. NotMyTempo says:

    “Be Strong. Hide Your Checkboxes” and say good by to the keyboard.

    • Matthew Cain says:

      Yeah, that sucks.. Sometimes we have to choose the lesser of the two evils.

      • Tim says:

        If you use “opacity: 0” instead of “display: none”, the checkbox/radio is still technically there on the page. For bonus points, you could position it over the top of the simulated controls so that (in some cases) the user is still interacting with the original input.

  20. justin says:

    how can we use the radio toggle design for checkboxes? I just want a yes and no slide toggle. Sure I will figure it out on my own soon, after scouring the web for an hour.

    • Matthew Cain says:

      Hi Justin!

      Thanks for finding my article useful, and sorry for my late response. Here’s what you need to do in order to achieve the effect you’re looking for:

      1. Locate the block with styles for radio buttons (it’s commented out as /* Radio buttons */) and replace each occurrence of “radio” with “checkbox”.
      2. Find the style section with checkboxes /* Check-boxes */ and remove it OR if you want to keep the styles, rename the checkbox class to “radio” and the effect will be replaced.

      Hope this helps!


  21. justin says:

    I love it! thank you so much!

  22. Mike Snyder says:

    Great tutorial. Are you thinking of improving this for accessibility (i.e. keyboard navigation)?

  23. susan2011 says:

    Hi Everyone,
    I am graphically illiterate (ie no idea how to do this stuff). However, I would like to send a friend an email (or document) with and ‘yes’ and ‘no’ check box but where it’s impossible to check the ‘no’ box. I think I’ve seen this on some joke thing ages ago – when trying to check the ‘no’ box it moves….

    Any ideas about how I can do this?
    Thank you

    • justin says:

      LOL! Just use a static image, that would be the easiest. In jQuery javascript you would do something like this

      $(‘input[“type=checkbox”]’).bind(‘click’, function(e) {
      e.preventDefault(); // this ignores the default behavior of selecting the checkbox

    • Matthew Cain says:

      Email is a tricky medium for tweaking the elements, mainly because not every email client supports the newest CSS rules. Probably indeed the best solution would be to send a static image 🙂

  24. NenN NelsoN says:

    Wow, thank you so much for the sharing, the touch to flat design is incredible but I prefer no rounded borders, so I did a little change…

    • Matthew Cain says:

      Sure, that’s what it’s all about, I provide an example and you customize it to your needs 🙂 Glad you liked it!

  25. Jep says:

    Great post Matthew! What I find very helpful is that you add stylings step by step and explain what it does in between. I’ve learned something today 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *