Inputs

@@adsense
Metro UI CSS provides tools for styling input fields. Such as: text, password, checkbox, switch, etc. The input elements are formed from the outer container, the input element and auxiliary elements. This allows you to style the input elements, and give them additional futures.

Text & password


                <!-- input[type=text] -->
                <div class="input-control text">
                    <input type="text">
                </div>

                <!-- input[type=password] -->
                <div class="input-control password">
                    <input type="password">
                </div>

                <!-- input with placeholder -->
                <div class="input-control text">
                    <input type="text" placeholder="Input you text here...">
                </div>

                <!-- readonly input -->
                <div class="input-control text">
                    <input type="text" readonly>
                </div>

                <!-- disabled input -->
                <div class="input-control text">
                    <input type="text" disabled>
                </div>

Checkboxes & Radio buttons

Checkboxes
Small checkboxes
indeterminate
indeterminate small-check
Radio buttons
Small radio buttons

                <!-- Checkbox -->
                <label class="input-control checkbox">
                    <input type="checkbox" checked>
                    <span class="check"></span>
                    <span class="caption">Checkbox</span>
                </label>

                <!-- Small Checkbox -->
                <label class="input-control checkbox small-check">
                    <input type="checkbox" checked>
                    <span class="check"></span>
                    <span class="caption">Checkbox</span>
                </label>

                <!-- Radio button -->
                <label class="input-control radio">
                    <input type="radio">
                    <span class="check"></span>
                    <span class="caption">Radio</span>
                </label>

                <!-- Small radio button -->
                <label class="input-control radio small-check">
                    <input type="radio">
                    <span class="check"></span>
                    <span class="caption">Small radio</span>
                </label>

Switchers (checkbox variation)

Modern Switchers
Original Switchers

                <!-- Modern switch -->
                <label class="switch">
                    <input type="checkbox">
                    <span class="check"></span>
                </label>

                <!-- Original switch -->
                <label class="switch-original">
                    <input type="checkbox">
                    <span class="check"></span>
                </label>

Textarea

Default
Auto resize height
Auto resize with max height

                <div class="input-control textarea">
                    <textarea></textarea>
                </div>
                <div class="input-control textarea"
                    data-role="input" data-text-auto-resize="true">
                    <textarea></textarea>
                </div>
                <div class="input-control textarea"
                    data-role="input" data-text-auto-resize="true" data-text-max-height="200">
                    <textarea></textarea>
                </div>

Select

Select
Select with multiply

                <div class="input-control select">
                    <select>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </div>
Metro UI CSS now supported thrid-party Select2.js plugin. We recomended use it

Input file

This future require data-role="input" attribute. 


                <div class="input-control file" data-role="input">
                    <input type="file">
                    <button class="button"><span class="mif-folder"></span></button>
                </div>

Input buttons





                <input type="button" value="Button">
                <input type="reset" value="Reset">
                <input type="submit" value="Submit">

Text field states


                <div class="input-control text error">
                    <input type="text">
                </div>

                <div class="input-control text warning">
                    <input type="text">
                </div>

                <div class="input-control text success">
                    <input type="text">
                </div>

                <div class="input-control text info">
                    <input type="text">
                </div>

Input with prepend icon





                <div class="input-control text">
                    <label>Prepend icon</label>
                    <span class="mif-user prepend-icon"></span>
                    <input type="text">
                </div>

                <div class="input-control text">
                    <label>Prepend icon</label>
                    <img src="..." class="prepend-icon">
                    <input type="text">
                </div>

Big input





                <div class="input-control text big-input">
                    <input type="text">
                </div>

Inputs with helper buttons (clear & reveal)

This future require data-role="input" attribute. 


                <!-- Input with clear helper -->
                <div class="input-control text" data-role="input">
                    <input type="text">
                    <button class="button helper-button clear"><span class="mif-cross"></span></button>
                </div>

                <!-- Input with reveal helper -->
                <div class="input-control password" data-role="input">
                    <input type="text">
                    <button class="button helper-button reveal"><span class="mif-looks"></span></button>
                </div>

Input with button(s)


                <div class="input-control text" data-role="input">
                    <input type="text">
                    <button class="button"><span class="mif-search"></span></button>
                </div>

                <div class="input-control text" data-role="input">
                    <input type="text">
                    <div class="button-group">
                        <button class="button"><img src="images/location.png"></button>
                        <button class="button"><img src="images/group.png"></button>
                        <button class="button"><img src="images/power.png"></button>
                    </div>
                </div>

Modern inputs

You login Please enter you login or email Input login
You login Please enter you login or email Input login
You password Please enter you password Input password 

                <div class="input-control modern text">
                    <input type="text">
                    <span class="label">You login</span>
                    <span class="informer">Please enter you login or email</span>
                    <span class="placeholder">Input login</span>
                </div>

                <div class="input-control modern text iconic">
                    <input type="text">
                    <span class="label">You login</span>
                    <span class="informer">Please enter you login or email</span>
                    <span class="placeholder">Input login</span>
                    <span class="icon mif-user"></span>
                </div>

                <div class="input-control modern password iconic" data-role="input">
                    <input type="password">
                    <span class="label">You password</span>
                    <span class="informer">Please enter you password</span>
                    <span class="placeholder">Input password</span>
                    <span class="icon mif-lock"></span>
                    <button class="button helper-button reveal"><span class="mif-looks"></span></button>
                </div>

Input range

Default
With subclass big-input

                <div class="input-control range">
                    <input type="range">
                </div>

                <div class="input-control range big-input">
                    <input type="range">
                </div>