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.

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

  1. Bahis sitelerine son zamanlarda ilgi hayli artmış görünüyor. Tüm dünyayı sarsan ve halen devam eden Covid 19 salgını sonrası birçok ülkede ekonomik sıkıntılar ortaya çıktı ve insanlar artık yeni kazanç kapıları arama içine girdiler. Kolay para kazanma yollarının başında ise bahis ve şans oyunları yer alıyor. Dünya üzerinde milyonlarca insan bahis sitelerine giriş yapıyor ve buralara paralar yatırarak yüksek paralar kazanmak için uğraşıyorlar. Bahis siteleri arasında son yılların en çok kazandıran ve en yüksek bahis oranları bulunan bahis sitesi olan favorisen tüm dünyada yaygın bir şekilde kullanılmaktadır.

  2. Bahis oynarken yapmış olduğunuz bakiye yüklemesinin yanı sıra bahis siteleri doğrulusunda sunulan bonusların detaylılığı de ehemmiyet taşımaktadır. Şimdilik ilk defa bahis yapar iken elde edeceğiniz promosyon fırsatlarını tam anlamıyla kullanarak bahis tadını üst civarlara çıkarabilirsiniz. Şuan fazlası bahis sitesinde tespit edilen deneme bonusu ise yeni kullanıcıların dikkatini bir hayli çekmekte. Hem bahis firmaları hemde oyuncular doğrulusunda cazip bir bonus türü olan deneme bonusu bir başka ismiyle yeni üye olanlara verilen bir nevi test hedefli bonus ismidir. Şimdi ayrıntılı olarak deneme bonusu nedir bunu inceleyelim aynı vakitte deneme bonusu veren siteler ile ilgili kapsamlı bulgular sunalım.

  3. ek gelir says:

    anket yap para kazan

  4. Stromanymn says:

    [url=]buy ivermectin online[/url] cost of ivermectin pill

  5. ChesterJat says: ivermectin topical

  6. Luovfq says:

    A very cool characteristic on FindLoveAsia is the Timeline which reveals you new folks on the platform, new pictures that members add to their profiles, and the listing of members who need to start a conversation. AsianBeautyOnline provides free registration, which allows you to start shopping the profiles of real Asian ladies. The good factor is that the platform verifies every new female member to make sure its database has actual users. However EasternHoneys grants all new users 20 bonus credit for profitable signal-up to test out the platform. Relationship websites range from main companies with tens of millions of customers from all walks of life, to niche websites that cater to particular communities based on interests or background. AsianMelodies, is a partly free worldwide relationship site that offers western males to make contact with women from Asia. Starting with an Asian dating site free or partly free is a good way, in case you consider that online dating can give you the results you want.

    Date Asian Woman is easy to use and has quite a lot of free services that may assist you to discover the options and discover girls you want. Moreover, you should use search tools with various filters that may help you find an Asian woman who matches your preferences. Some sites on our record are fully free, others are partly paid, but their free membership features are sufficient to find a woman of your goals. You too can send a wink, like, and add fav profiles to a special listing. There is also an opportunity to buy coins (special virtual foreign money) – a person should buy 1800 for 4.Ninety nine USD. Nonetheless, to make use of all Date Asian Lady potential to the fullest, you’ll want to purchase credits. How much information do potential matches have when viewing your profile? Looking back, I’d have liked to know what I was getting myself into or no less than some advice on navigating Chinese dating tradition.

    Chinese language guys, with pressure from their parents and coming from a unique culture of dating, by-and-massive date to marry. The positioning goals to advertise Asian culture and help folks to satisfy and date ladies from different [url=]how to know if a chinese girl likes you[/url] Asian international locations. The site has greater than 400,000 members, so your possibilities of assembly a match are quite high. The site affords an amazing romantic surroundings for assembly someone special from Asia to talk to, date and even construct a serious long-distance relationship with. However notice that the location is only partly free. This courting platform is fully free for ladies. Register totally free, create a profile, and start relationship. AsianBeautyOnline is a good option if you want to start out relationship beautiful Asian women. US to begin my teaching profession. For instance, such providers as chat, emails, calls and exchanging photos require spending some credits. Sign-up is free, and customary membership allows you to read emails and messages, view member profiles and photographs of incredible Asian ladies, and use the essential and advanced search. Free features on the TrulyAsian webpage embrace registration, shopping member profiles, sure forms of communication, including to a Favorites checklist, and spherical the clock buyer support.

    But the heightened performance of our platform mixed with our sophisticated Compatibility Matching System, make it the ideal dating webpage for Asians if you’d like to find a wider vary of singles. Linda can be a courting coach assisting singles of their love search. There are a variety of free features, such as registration, utilizing search filters, browsing profiles, making adjustments to your account, and reading messages that assist you to find a lovely lady on Asian Melodies within a short period of time. That’s why the likelihood is high that you can find someone special to communicate or even have a romantic relationship with. Shea and her boyfriend have been collectively 10 months, and this was the first time they were brazenly discussing race. At the same time a straightforward task to undertake. Understandable. Remember that you’ll spend lots of time there, so your eyes and arms mustn’t get drained looking for a component. And after we’re carried out with the online dating essay ideas, it is time to get to the evaluation of all the things that we have realized.

  7. Nice blog here! Also your website loads up very fast!
    What web host are you using? Can I get your affiliate link to your
    host? I wish my website loaded up as quickly as yours lol

  8. Chieftaint says:

    Somebody essentially assist to make seriously posts I would state .

  9. Karmagician says:

    Way cool! Some extremely valid points! I appreciate you writing this post and also the rest of the website is extremely good .

  10. Loganfdw says:

    Tell Tale Signs Of A Troubled union

    The coy glances, The sore touch, The enthusiastic embraces, the fun outings. It’s always smooth sailing at first. in that case,perhaps, Inevitably the strong currents pick up and roughly toss every thing has become around. Indifference can slow poison a romance relationship, So next time your lovers shrugs and says, “whatsoever” Question their lack intriguing.

    Go employing your gut

    You know that queasy feeling that causes knots in your stomach and subliminally warns you? Trust it completely. Never ignore your norms of behavior. If you have a nagging doubt that something is amiss in your the relationship and you’re depressed, Discuss it immediately with your significant other. Don’t stuff off as your in built gut radar is generally never wrong.

    Human place

    anxiety, Fatigue and illnesses can all be deterrents for a healthy physical loving relationship. But when your honey makes up excuses for your advances all the time, It’s a sign [url=]chnlove review[/url] you mustn’t ignore. It just may be that each other is looking to move on.

    why don’t we get physical

    If the only physical touch involves assault, walk out pronto. An abusive broken relationship, Be it mental or emotional, Can scar you for some time. Nip it in the bud and don’t make excuses to warrant your partner’s actions.

    hills out of molehills

    Take the cue when every little argument escalates into a real drama. But when the Houdini acts get routine there’s decidedly a problem. Don’t let your self worth take a beating.

    THE FIVE ‘Cs’ fast solution GUIDE

    1. Clearly communicate your emotions

    2. Avoid to get too clingy

    3. Find a mid ground, Commit to make every thing has become work4. Don’t lose your confidence or your partnership will crumble5. Be calm your patience and effort will surely win over the situation.

  11. Quailment says:

    Londranın Başkenti neresidir.

  12. drill man says:

    You are invited to my blog that I created and manageblog

  13. suc cess of botox for bladder dysfunction

  14. Helpful information. Fortunate me I found your site accidentally, and I am shocked why this coincidence did not came
    about earlier! I bookmarked it.

  15. Hello! Quick question that’s completely off topic.
    Do you know how to make your site mobile friendly?
    My weblog looks weird when viewing from my iphone4.
    I’m trying to find a template or plugin that might be able to correct this problem.
    If you have any suggestions, please share. Many thanks!

  16. will botox to bladder for incontinence

  17. botox bladder procedure video

  18. botox for overactive bladder treatment in men

  19. botox bladder injection cpt 10

  20. ear piercing that helps with migraines

  21. success rate of botox for overactive bladder

  22. zortilonrel says:

    Regards for helping out, good info .

  23. 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!

  24. 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.

  25. botox says:

    botox botox near me botox before and after

  26. botox says:

    botox botox near me botox before and after

  27. android quality insta reels download

  28. android instagram photo download

  29. 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.

  30. instagram reklamsız reels indirme sitesi

  31. ios quality insta igtv download

  32. muat turun imej android instagram

  33. instagram računalo preuzimanje fotografija

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

  35. 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 (

  36. Liked this script. Thanks for tutorial

  37. shibi says:

    love it! thank you so much!

  38. Peter says:

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

  39. 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!

  40. 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.

  41. 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!


  42. justin says:

    I love it! thank you so much!

  43. Mike Snyder says:

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

  44. 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 🙂

  45. 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!

  46. 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 *