Logo

Who is talking?

Archive

Cleverly over-ride your Checkboxes and Radio buttons using CSS only!

almost 2 years ago | Aditya Saxena: DesignFrags

With the advent of Web 3.0, HTML/CSS is a tricky game on most occasions. WYSIWYG editors have been making html/css easy much before I started to play around with this stuff. What they don’t offer you, though, is creativity - which I must say, is in abundance at my workplace. One of my oldest pet-peeves with fellow Designers has been their reluctance to learn more about what’s possible to do on the Web. While I don’t judge them for their lack of interest, I’m sure learning a little bit about the Web never hurt anybody. So, anyway, cutting to the chase, they gave me this wonderful piece of design with checkboxes and radio buttons that I knew were not possible just with plain css. Here are some snapshots of the design. Checkboxes Radio Buttons Clearly, the designs are good. But, you’d have to say the checkboxes and radio buttons depicted aren’t those that come out of the box in browsers. Well, relax. There’s no such thing as impossible, and it’s the same here. The trick I learned to customize these boxes is while working with fellow developer at my workplace. Obviously I customized it to an extent to work for me, and so can you. Before proceeding further, if you want to jump into the code right away and ignore my rest of the post, here is the Gist. And here’s the JSBIN Let’s dive into the code right away. My HTML looks quite straightforward: <!-- custom radio button --> <label> <input type="radio" name="sweet-radio" id="sweet-radio-1" value="Yes" checked> <span class="custom-radio-button"> </span> <span>Sweet Radio 1</span> </label> <!-- custom checkbox --> <label> <input type="checkbox" id="sweet-check-2" checked/> <span class="custom-checkbox-button"> </span> <span>Sweet Check 2</span> </label> What we’re trying to do here is replace the existing checkbox’s and radio button’s states: checked and unchecked. We’ll first hide the default radio buttons or checkboxes Replace them (or, rather, their states) with a background-image or in this example’s case, with a Font-Awesome Icon. Notice, that in the Gist, I’ve include font-awesome.css. Without it, this example wouldn’t work. Font-Awesome basically allows me to replace the existing radio/checkboxes with some characters taken from Font-Awesome’s Web Font, which is included in its CSS as @font-face The label tag encloses everything that’s got to do with one radio button or one checkbox and that’s because even if you click on the label, the checkboxes and radio buttons get selected. (a handy trick that increases the UX of any form manifold) The input[type='radio'] & input[type='checkbox'] have two siblings each. The 2nd sibling is a <span> tag that contains the text which needs to be displayed. Most of the magic will happen, though, in these two places: <span class="custom-checkbox-button"></span> and <span class="custom-radio-button"></span> Note: I will be refer to customizing these in Chrome browser. With StackOverflow and Google, it’s never too difficult to get these to work in other browsers as well, that is, if they’re not already working there. My CSS goes like this: body { background-color: #eee; } /** CHECKBOX CSS **/ input[type="checkbox"] { display: none; position: relative; } input[type="checkbox"] + .custom-checkbox-button { margin-right: 11px; position: relative; } input[type="checkbox"] + .custom-checkbox-button:after { color: #cfdaed; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\f096'; font-size: 20px; cursor: pointer; } input[type="checkbox"]:checked + .custom-checkbox-button { margin-right: 10px; display: inline-block; } input[type="checkbox"]:checked + .custom-checkbox-button:after { content: '\f14a'; /* This comes from Font Awesome */ color: #1569ad; } /** RADIO BUTTON CSS **/ input[type="radio"] { display: none; position: relative; } input[type="radio"][disabled] + .custom-radio-button:after { cursor: not-allowed; } input[type="radio"][disabled]:checked + .custom-radio-button:after { content: '\f111'; color: #cfdaed; } input[type="radio"]:checked + .custom-radio-button:after { content: '\f058'; color: #1569ad; } input[type="radio"] + .custom-radio-button:after { color: #cfdaed; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\f10c'; font-size: 18px; cursor: pointer; } Lets look at the CSS now, point by point First, we hide the default states using display: none; Then, using pseudo CSS for :after tag of the custom <span> implementation, I add some css that styles my custom checkbox or radio button. Alongside these styles, is font-family: FontAwesome; content: '...' For each icon, in Font-Awesome, which I want to use to replace the default behaviour of the checkboxes/radio buttons, I find out the character that the icon uses, and just pull it here. Similarly, I add other icon characters to the checked or the disabled state of the Checkbox/Radio Button. That’s it! Lets take a deep breath and look again what we did. It’s not rocket science, and, once you get the hang of this, you’ll want to do this again and again in your user interfaces just because this looks so neat. Don’t forget to hit me up on Twitter if you like what I do for a living. Cheers!

Foosball - those days

almost 3 years ago | Aditya Saxena: DesignFrags

I was first introduced to the game of Foosball on 2nd June 2008 — the first day of my first job. It was an enthralling day to say the least and what happened during the lunch-time on that very day would change my next 5 years completely. I happened to peek into the Games room adjacent to the cafeteria. I saw Table Tennis and the loads of people in queue to get their hands on it. Though I already knew how to play TT, I chose to skip it for the sake of overgrowing crowd. Some people were on the carrom board too but there were none on the 2 Foosball tables kept close to the walls of the room. I was pleasantly surprised by the existence of a Foosball table in India — let alone two. No, really! Till the age of 21, if you haven’t noticed certain things around you while you were busy growing up, you assume that’s the world for you. As soon as I went up to the table, I was surprised to notice another set of people barging in to get their hands on the table. They were PROs of the office. Since I got there first, I got a chance to play along with 3 members of that gang. Needless to say, I was humbled brutally ☺. I did not know how to hold the sticks, how to hit the ball, how to use the wrists and it had to fall apart. I composed myself and waited for another turn. My team of 2 was beaten badly again primarily due to my play. There are times when the human mind wanders around looking for something to please. That day, something inside my head ticked off. I didn’t realise it then, but looking back, I knew I had found something that I wanted to be a part of. Next 4 years (which I might talk about at length some day) were dedicated to getting good at Foosball. It took a lot of time to learn the tricks of the trade but it was worth it. A year back, when I left that company — after 4 long years — I was sad more because I knew I wouldn’t be able to play Foosball everyday. Such has been the effect Foosball has had on me. It is cliched but it is very true that ‘Games/Sports teach you many things along the way’. In addition to this, I got to organize 4 Foosball tournaments in that company — which was an honor and an exciting adventure. I was also a Foosball coordinator for about an year in the Company before I quit the Firm. Since I’m talking about only Foosball in this post, I would like to note that there were certain things that also inspired me to take up Foosball as a corporate sport ;-) I call it that as I have known nothing else that you can enjoy while you’re at work. Saurav Bhandari & Abhijit Phadke were two senior folks in the company who inspired me the most to look at Foosball from a completely different view. There is also a Youtube Channel This Week in Foosball that I follow religiously and would suggest anyone who is interested in Foosball to bookmark it. There is an International Table Soccer Federation (Foosball is the unofficial name of the sport) which conducts worldwide tournaments and a World Cup as well. There is a Facebook group for Indians interested in Foosball. It’s a great place to get together and discuss about Foosball. I reside in Delhi currently and started up a Meetup for Foosball last October. We haven’t had any meetups yet due to negligible interest in the game here and also due to dearth of places around where you could play. But, the hope is that the meetup will gain traction gradually and when more people join the group, this will become a big thing someday. The Indian Table Soccer Federation has its headquarters in Chandigarh. Balwinder Singh Johal — the president of the group — is not really approachable. He has been really blunt on calls I have had with him over the past couple of years about participation from India. When I contacted the International Federation via email and informed them of the situation, their Indian counterparts were quite displeased and that was the last conversation I had with them :D. I cannot assert this anymore but Foosball has been an inseparable part of me for the greater part of my professional life. Once I left Hyderabad exactly two years ago, I knew that without Foosball, I would be less than happy. And so I am. In an attempt to revive those older memories and possibly find that old spark again, I started a meetup and now I am here with a blog. Here is wishing for a future filled with Foosball fun