CSS Radio Button: Design Them in Different Colors and Styles

Udemy Editor

CSS was first introduced way back in 1997. At that time, the internet was still in a fledgling state and websites were still very basic. Developers began to feel a need to make their websites more interactive. HTML (which was the language being used then for making most webpages) was very limited in its capacity to make a web page more attractive. CSS was the perfect solution to this problem. CSS is the short form of Cascading Style Sheets. It basically lets you define a template for your webpage, and then use the page throughout your site.

In this tutorial, we show you how to create stylish CSS radio buttons, that you can embed in your webpage. We assume you have a basic understanding of HTML and CSS. If not, we recommend you first check out this class on CSS fundamentals.

So what are radio buttons exactly? They’re circular buttons that are ‘selected’ when you click on them. Radio buttons are very common on forms – you must have seen them a lot if you’ve submitted a lot of forms.

Designing a Simple CSS Radio Button

First, let’s take a look at how to make a simple circle in CSS. Because radio buttons are circular, you need to know how to create a circle. The code is pretty easy. We’ll assume that you are familiar with the basics of HTML and CSS, and you know how to link your CSS file to your document.

First, to make a simple circle, you can use the following CSS code:

span {
border-radius: 100px;
background: #000;
color : white;
padding : 5px 15px;
}

You can experiment with the code on your own. The border-radius keyword is the important keyword here; it’s what creates the circle, just like the inline block of code is used to create a square box.

Suppose you wanted to add text to a circle, you could use the following CSS code:

span {
     display: block;
     height: 60px;
     width: 60px;
     line-height: 60px;
     -moz-border-radius: 30px; /* or 50% */
     border-radius: 30px; /* or 50% */
     background-color: black;
     color: red;
     text-align: center;
     font-size: 1em;
}

Any text you wanted to enter in the middle of the circle, you would with HTML:

 This is the text

You can change the height and width of the circle to make it bigger. But because you are making a circle, make sure that you keep the height and width values equal.

Designing Clickable Radio Buttons

Now that you know how to create non-clickable radio buttons, let’s move on to radio buttons that you can select after clicking. The code to create a radio button can be a little complex- and you need to have a good grasp on HTML radio buttons to understand it.

The guys at www.csscheckbox.com have a free radio button generator that you can use to generate custom radio buttons until you can do it for yourself. We’ll take some sample radio buttons they’ve designed and attempt to explain the code to you. You can download a few sample radio buttons, open them up in your browser and then view the source code. The process to create a radio button will be the same, so it doesn’t matter what code you download. The only difference in the code will be customization – the way the radio button looks.

Target Radio Buttons: 6 Large floating pink radio buttons that you can click.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Checkbox Demo from CSSCheckbox.com</title>
<link rel="stylesheet" href="style.css"/>
<style type="text/css">
label {margin-right:20px;}
</style>
</head>
<body>
<h1 style="margin:0; margin-top:10px; padding:0; padding-left:25px; padding-bottom:10px; font-family:sans-serif;">CSS Checkboxes!</h1><div style="background:#444; color:#fafafa; padding:10px;"><h3>Dark Background</h3><table><tr><td><input type="radio" name="radiog_lite" id="radio1" class="css-checkbox" /><label for="radio1" class="css-label">Option 1</label></td><td><input type="radio" name="radiog_lite" id="radio2" class="css-checkbox" checked="checked"/><label for="radio2" class="css-label">Option 2</label></td><td><input type="radio" name="radiog_lite" id="radio3" class="css-checkbox" /><label for="radio3" class="css-label">Option 1</label></td></tr></table></div><div style="background:#fafafa; color:#222; padding:10px;"><h3>Light Background</h3><table><tr><td><input type="radio" name="radiog_dark" id="radio4" class="css-checkbox" /><label for="radio4" class="css-label">Option 1</label></td><td><input type="radio" name="radiog_dark" id="radio5" class="css-checkbox" checked="checked"/><label for="radio5" class="css-label">Option 2</label></td><td><input type="radio" name="radiog_dark" id="radio6" class="css-checkbox" /><label for="radio6" class="css-label">Option 1</label></td></tr></table></div>
</body>
</html>

Explanation:

The code to create 6 large radio buttons looks complex, doesn’t it? Let’s take it one step at a time. If you’re familiar with radio buttons in HTML, you should recognize the code to create a radio button. For example, the line “<input type=”radio” name=”radiog_lite” id=”radio1″ class=”css-checkbox” />” creates a radio button with an ID of radio1. It is then assigned to the class called “css-checkbox”.

A label for that radio button, showing the text that will be displayed, is created and linked to it. For example, the line “<label for=”radio1″>Option 1</label>” creates a label for the button with the id radio1. This label will display the text “Option 1”. The “checked” attribute will tell the browser to display a radio button as checked. You can use this attribute to automatically pre-select a radio button every time a page loads (which is what’s been done in the code.

Finally, we come to the styling, which you can see within the “<h1>, <h2> and <h3>” tags. This will tell the browser how the radio buttons will look like (color, width, height, borders and general background). A simple HTML radio button is thus transformed into a large radio button that turns pink when you click on it.

As an exercise, you should try eliminating 5 radio buttons from the above code until only one radio button remains. You can also try changing the padding (which is used to delineate an element from the surrounding content), the height and the width of the circles.

The only way to get a good grasp on creating your own CSS radio buttons is through practice. You can always look up our CSS crash course if you need a little nudge in the right direction. Once you have a good hang of the basics, try out making your own webpage with HTML and CSS. And do leave a comment to share your new site with us!

<!–

label {margin-right:20px;}

–>