CodeLab
Show Output
 
xxxxxxxxxx
99
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<title>Custom Radio Buttons with CSS and jQuery</title>
6
<style>
7
    .custom-radio{
8
        width: 16px;
9
        height: 16px;
10
        display: inline-block;
11
        position: relative;
12
        z-index: 1;
13
        top: 3px;
14
        background: url("/examples/images/radio.png") no-repeat;
15
    }
16
    .custom-radio:hover{            
17
        background: url("/examples/images/radio-hover.png") no-repeat;
18
    }
19
    .custom-radio.selected{
20
        background: url("/examples/images/radio-selected.png") no-repeat;
21
    }
22
    .custom-radio input[type="radio"]{
23
        margin: 1px;
24
        position: absolute;
25
        z-index: 2;            
26
        cursor: pointer;
27
        outline: none;
28
        opacity: 0;
29
    }
30
    
31
    /* Let's Beautify Our Form */
32
    form{
33
        margin: 20px;
34
    }
35
    label{
36
        display: block;
37
        padding: 2px 0;
38
    }
39
    input[type="submit"]{
40
        float: left;
41
        background: #f2f2f2;
42
        border: 1px solid #CCCCCC;
 

在微博、微信、公众号、小程序分享此示例。 如果您觉得有帮助,请给我们一个赞。