CSS-FORM-UI/index.html at master · scazzy/CSS-FORM-UI · GitHub

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS FORM UI - Styling Dropdown (select), checkbox and radio with css</title>
    <link rel="stylesheet" href="css/formui.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>

<header class="header">
    <h1>Styling CSS Forms - <small>Lightweight, simple, extensible</small></h1>
    <h3>Styling Dropdown (Select), Checkbox and Radio in CSS!</h3>
    <h4>
</header>

<div class="container">

<div class="well-flat">
    Available as CSS, and LESS files.
</div>

<form id="form-wrap">

    <div class="row">
        <p><strong>Dropdown</strong></p>
        <div class="formui-dropdown">
            <select>
                <option>Select</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
            </select>
        </div>
    </div>

<pre class="well">
&lt;div class="formui-dropdown"&gt
    &lt;select&gt;
        &lt;option&gt;Select &lt;/option&gt;
        &lt;option&gt;Option &lt;/option&gt;
        &lt;option&gt;Option 2&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</pre>

    <div class="row">
        <p><strong>Radio</strong></p>
        <label class="formui-radio option checked">
            <input type="radio" name="radio" value="a" checked/>Option a
        </label>
        <label class="formui-radio option">
            <input type="radio" name="radio" value="b"/>
            Option b
        </label>
    </div>

<pre class="well">
&lt;label class="formui-radio option"&gt;
    &lt;input type="radio" name="radio" value="a"/&gt;
    Option a
&lt;/label&gt;

&lt;label class="formui-radio option"&gt;
    &lt;input type="radio" name="radio" value="b"/&gt;
    Option b
&lt;/label&gt;
</pre>

    <div class="row">
        <p><strong>Checkbox</strong></p>
        <label class="formui-checkbox option checked">
            <input type="checkbox" name="checkbox[]" value="a"  checked/>
            Option a
        </label>
        <label class="formui-checkbox option">
            <input type="checkbox" name="checkbox[]" value="b"/>
            Option b
        </label>
        <label class="formui-checkbox option">
            <input type="checkbox" name="checkbox[]" value="c"/>
            Option c
        </label>
    </div>

<pre class="well">
&lt;label class="formui-checkbox option"&gt;
    &lt;input type="checkbox" name="checkbox[]" value="a"/&gt;
    Option a
&lt;/label&gt;

&lt;label class="formui-checkbox option"&gt;
    &lt;input type="checkbox" name="checkbox[]" value="b"/&gt;
    Option b
&lt;/label&gt;

&lt;label class="formui-checkbox option"&gt;
    &lt;input type="checkbox" name="checkbox[]" value="c"/&gt;
    Option c
&lt;/label&gt;
</pre>


    <p><strong>Text input</strong> - Roll your own</p>

    <div class="row">
        <label>Full name</label>
        <input type="text" class="formui" value="" placeholder="Your full name" />
    </div>
    <div class="row">
        <label>Password</label>
        <input type="password" class="formui" value="" placeholder="Password" />
    </div>
    <div class="row">
        <textarea class="formui" placeholder="About you"></textarea>
    </div>

</form>


<div class="well-flat">
    <strong>How it works?</strong><br/>
    It's extremely simple.
    We create a single wrapper around our non-stylable form elements (Dropdown, Checkbox &amp; Radio).<br/><br/>

    <strong>The magic!</strong> : We hide the real DOM element in such a way that it exists but remains invisible.<br/>
    This allows any clicks or action on that element (in all 3 cases) to function naturally.<br/>

    <strong>For Select/dropdown</strong>: Only javascript required is to "display" selected text.<br/>
    <strong>For Checkbox/Radio</strong>: Only javascript required
    is to add a "checked" class to the wrapper".

    <br/><br/>
    Whole CSS is completely customizable, and you can use it as part of your code instead of a library. It just shows a way how to style your Form Elements. Feel free to change class name, and everything else.

    <br/><br/>
    This minimal and still natural method allows all UI elements to work naturally, for getting or changing data. No specific
    library calls for those.

    <br/><br/>
    (Textboxes, textareas, buttons - are always stylable, hence not added in this lib)

    <br/><br/>
    Want more? - If you want it as a library with more functionalities, feel free to create an issue on the github.

</div>


</div>


<footer class="footer">
<strong>CSS FORM UI</strong> by <a href="http://eltonjain.com">Elton Jain</a> | Github<a href="http://github.com/scazzy">/scazzy</a> | Twitter<a href="http://twitter.com/eltonjain">/eltonjain</a>
</footer>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="js/formui.js"></script>

</div>
</body>
</html>