Styling radio buttons

HTML & CSS
1

I want to make my radio buttons into css3 elements, and instead of displaying simple radio button, it display a button style with a background color, when it is checked, it has different color but also checked is true, like a checked item. How can i do that? I was able to write some code but it didn’t work.why? Do i need to have some javascript?

2

There are lots of recent articles about this, as well as forum posts: http://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/

Were there bits you didn’t understand?

3

I understand and i read it before posting. The thing is i don’t want to show radio button as they are, instead replace them with a say

`background:grey;
padding:10px;
border:radius:10px;`

and when its checked, do color black. I wasn’t able to check a css styled element without clicking the radio button. A perfect example, of what i want.

4

Hi Ralph’s link explains how to do this but here is a simpler example.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.countries{text-align:center}
.countries input[type='radio'] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.countries label{
	display:inline-block;
	width:8em;
	margin:0 1em;
	border-radius:6px;
	background:#f9f9f9;
	color:#000;
	border:1px solid #ccc;
	text-align:center;
	line-height:1.8em;
	cursor:pointer;	
}
.countries input[type='radio']:checked + label{
	background:#f00;
	border:1px solid #000;
} 

</style>
</head>

<body>
<form class="countries">
		<input type="radio" name="countries" id="America" value="America">
		<label for="America">America</label>
		
		<input type="radio" name="countries" id="Mexico" value="Mexico">
		<label for="Mexico">Mexico</label>
		
		<input type="radio" name="countries" id="Cuba" value="Cuba">
		<label for="Cuba">Cuba</label>
</form>
</body>
</html>

In your original example you were using an adjacent selector (+) to style the label but your content was in a div and wasn’t adjacent. (You can use the general sibling combinator (~) to style siblings if needed.)

2 Likes
5

@PaulOB Wondering, what makes the radio button disappear, is it the clip?

6

Yes its another way of hiding something.

You could just place the input off screen with absolute positioning (left:-999em) but that may have issues with people tabbing to it still but probably wouldn’t be an issue here.

7

@PaulOB I tried replicating your example into my modified code, but i don’t see check ones on anyone, whichever i click. What am i missing?

8

Can you post your modified code as the fiddle didn’t look like it had been changed?

9

my bad, i missed the link. I updated the post with link.

10

Hi,

You didn’t associate the labels with the inputs. Its this behaviour of association that makes this thing work:)

When you click a label it will activate the associated form element which you do by explicit association for this method (e.g. for=“element_ID”)

<form class="form-inline" class="cal" method="" action="" onsubmit="return(false)">
<div class="col-lg-12">
		<input type="radio" name="optionsRadios" id="execl" value="Excellent">
		<label class="checkbox-inline" for="execl">Radio 1</label>
		<input type="radio" name="optionsRadios" id="average" value="average">
		<label class="checkbox-inline" for="average">Radio 2</label>
		<input type="radio" name="optionsRadios" id="poor" value="Poor">
		<label class="checkbox-inline" for="poor">Radio 3</label>
</div>
</form
11

@PaulOB Not sure i got what you said, you mean, keep the id same?

12

When you use a label:

<label class="checkbox-inline" for="execl">Radio 1</label>

the ‘for’ attribute identifies the control via its id.

e.g.

<input type="radio" name="optionsRadios" id="execl" value="Excellent">
<label class="checkbox-inline" for="execl">Radio 1</label>

That means that ’ for=“execl” matches the id of the input you want to associate it with ( id=“execl”).

Look at the code I gave you in my previous post and you will see that the ‘for’ attribute in each label matches the id of the input it refers to. In this way clicking a label also activates the radio and that’s how the technique works.

<input type="radio" name="optionsRadios" id="execl" value="Excellent">
<label class="checkbox-inline" for="execl">Radio 1</label>

<input type="radio" name="optionsRadios" id="average" value="average">
<label class="checkbox-inline" for="average">Radio 2</label>

<input type="radio" name="optionsRadios" id="poor" value="Poor">
<label class="checkbox-inline" for="poor">Radio 3</label>

for=“average” associated with the input who’s id is ’ id=“average”

for=“poor” matches id=“poor”

for=“execl” matches id=“execl”

13

Oh, sorry i missed the link, i [updated][1] it

[1]: http://jsfiddle.net/ehatwwL2/1/Continuing the discussion from Breaking down a long math calculation:

it does, but it gives me something like e.g 5.58976.0 and even long. I applied toFixed() event too as @Paul_Wilkins mentioned. yet it gives me pretty long APR. which is wrong.

14

then maybe your input parameters for this function are incorrect.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.