Label for Radio Button Using HTML CSS

Label for Radio Button Using HTML CSS will makes look and feel of a radio button much better. This task is done with id and for.
ID
of the radio and its coresponding lable’s for value should be same. Here is the tutorial and demo link

 

 

Label for Radio Button Using HTML CSS

Label for Radio Button Using HTML CSS

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>
<input type="radio" id="1" class="rad" name="name" />
<label for="1">One</label>
<input type="radio" id="2" class="rad" name="name" />
<label for="2">Two</label>
<input type="radio" id="3" class="rad" name="name" />
<label for="3">Three</label>
</body>
</html>

 

CSS

input[type=radio]:checked + label - label of the corresponding checked radio button will have #c33

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
label
{
background-color:#9C3;
padding: 5px 12px;
}

input[type=radio]
{
display:none;
}
input[type=radio]:checked + label
{
background-color:#C33;
}

 

Full Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>

<head>
<style type="text/css">
label
{
background-color:#9C3;
padding: 5px 12px;
}
input[type=radio]
{
display:none;
}
input[type=radio]:checked + label
{
background-color:#C33;
}
</style>
</head>

<body>
<input type="radio" id="1" name="name" />
<label for="1">One</label>
<input type="radio" id="2" name="name" />
<label for="2">Two</label>
<input type="radio" id="3" name="name" />
<label for="3">Three</label>
</body>
</html>

About prasad k

Prasad Kuppusamy has written 81 post in this blog.

i m php developer, web designer.

7 Responses to Label for Radio Button Using HTML CSS

  1. Real Rain says:

    good~

  2. Dear Prasad buddy

    So many thank u so many bundle of thanks dear

  3. phani says:

    it is working on FF and web kit only.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

areosystyle-lexeme