example multiple checkbox and icon checked selected

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Check box</title>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700">
</head>
<body>
    <div class="container">
        <div class="to-do-list">
            <h2>Select CheckBox</h2>
            <hr>
            <ul>
                <li>
                    <input id="checkbox1" type="checkbox" checked>
                    <label for="checkbox1">Drink some coffee</label>
                </li>
                
                <li>
                    <input id="checkbox2" type="checkbox" checked>
                    <label for="checkbox2">Do some work</label>
                </li>
                <li>
                    <input id="checkbox3" type="checkbox">
                    <label for="checkbox3">Drink more coffee</label>
                </li>
                <li>
                    <input id="checkbox4" type="checkbox">
                    <label for="checkbox4">Grow a beard</label>
                </li>
                <li>
                    <input id="checkbox5" type="checkbox">
                    <label for="checkbox5">Rule the world!</label>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
@charset "utf-8";
body {
     background: #00ff00 url("http://www.lfvh.com/cn/images/background4.jpg") no-repeat fixed center; 
    color: #272727;
    font: 16px/40px "Open Sans", sans-serif;
    margin: 0;
}
h2 { margin: 0; }
hr {
    background: #4CAF50;
    border: none;
    height: 1px;
    margin: 0;
    min-height: 1px;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.container {
    height: 320px;
    left: 50%;
    margin: -160px 0 0 -152px;
    position: absolute;
    top: 50%;
    width: 304px;
}
/* ---------- To-Do-List ---------- */
.to-do-list {
    background: -webkit-linear-gradient(top, #aaa, #fff 2%);
    background: -moz-linear-gradient(top, #aaa, #fff 2%);
    background: -o-linear-gradient(top, #aaa, #fff 2%);
    background: -ms-linear-gradient(top, #aaa, #fff 2%);
    background: linear-gradient(top, #aaa, #fff 2%);
    -webkit-background-size: 100% 40px;
    -moz-background-size: 100% 40px;
    background-size: 100% 40px;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

example multiple checkbox and icon checked selected

Category

Associated Tags

RESULT

HTML

CSS

Related snippets :

Login via

RESULT

HTML

CSS

Related snippets :