Styles

Global CSS settings including typography, buttons, iconography, tables, and much more.

Reset

Chico UI uses the Reset CSS to normalize the inconsistent default styling of HTML elements by browsers.

Headings

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

Back to Headings / Back to Top

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec ipsum tellus, quis ultricies nunc. Vestibulum ornare porta nunc, vitae tincidunt massa ornare vel. Nam ut felis odio.

Nam porta nunc vitae orci sollicitudin a ullamcorper purus dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed libero eget purus dictum fringilla non sed lectus. Etiam commodo quam in neque vehicula dapibus.

Phasellus ornare lacus ut purus elementum eget sodales dui placerat. Nunc ultrices porttitor mi, eu varius quam tristique in. Etiam tempor porta sodales.

Phasellus dui nisi, hendrerit a porta vel, tempus bibendum mauris.

<p>Lorem ipsum dolor sit amet.</p>

Back to Paragraphs / Back to Top

Lists

Description

Mercado Libre
Donde compras y vendes de todo!
Mercado Pago
La forma más simple de recibir pagos!
Mercado Shops
Tu tienda virtual gratis y en minutos!
<!-- Unstyled list -->
<ul>
    <li>
        <a href="http://www.mercadolibre.com">Mercado Libre</a>
    </li>
</ul>

<!-- Unordered list -->
<ul class="ch-list">
    <li>
        <a href="http://www.mercadolibre.com">Mercado Libre</a>
    </li>
</ul>

<!-- Ordered list -->
<ol class="ch-list">
    <li>
        <a href="http://www.mercadolibre.com">Mercado Libre</a>
    </li>
</ol>

<!-- Description list -->
<dl class="ch-list">
    <dt>Mercado Libre</dt>
    <dd>Donde compras y vendes de todo!</dd>
</dl>

Back to Lists / Back to Top

List boxes

<ul class="ch-box-list">
    <li>
        <a href="#">Motors</a>
    </li>
    <li>
        <a href="#">Real Estate</a>
    </li>
    <li>
        <a href="#">Services</a>
    </li>
</ul>

<ul class="ch-box-list">
    <li>
        <a href="#">
            Multiline text. Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing.
            Donec sit amet purus in sapien luctus sodales adipiscing. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit.
        </a>
    </li>
    <li>
        <a class="ch-ellipsis" href="#">
            Ellipsis text. Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing.
            Donec sit amet purus in sapien luctus sodales adipiscing. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit.
        </a>
    </li>
</ul>

<ul class="ch-box-list">
    <li>
        <span class="ch-icon-user"></span>
        <a href="#">Account</a>
    </li>
    <li>
        <span class="ch-icon-cog"></span>
        <a href="#">Settings</a>
    </li>
</ul>

Back to List boxes / Back to Top

Buttons

Normal buttons

Disabled buttons

<!-- Normal buttons -->
<input type="button" class="ch-btn ch-btn-large" value="Large button" />
<input type="button" class="ch-btn" value="Button" />
<input type="button" class="ch-btn ch-btn-small" value="Small button" />
<input type="button" class="ch-btn-skin ch-btn-small" value="Skin button" />
<button class="ch-btn-skin ch-btn-small">
    <span class="ch-icon-heart"></span>Favorite
</button>

<!-- Disabled buttons -->
<input type="button" class="ch-btn ch-btn-large ch-btn-disabled" value="Large button" disabled />
<input type="button" class="ch-btn ch-btn-disabled" value="Button" disabled />
<input type="button" class="ch-btn ch-btn-small ch-btn-disabled" value="Small button" disabled />
<input type="button" class="ch-btn-skin ch-btn-small ch-btn-disabled" value="Skin button" disabled />
<button class="ch-btn-skin ch-btn-small ch-btn-disabled" disabled>
    <span class="ch-icon-heart"></span>Favorite
</button>

Back to Buttons / Back to Top

Boxes

Box Container

Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing. Donec sit amet purus in sapien luctus sodales adipiscing.

Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing. Donec sit amet purus in sapien luctus sodales adipiscing.

Box Lite

Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing. Donec sit amet purus in sapien luctus sodales adipiscing.

Box Error

Oops, something wrong happened!

Box Warn

Something might be wrong!

Box Help

Do you need any help?

Box Info

Here's more information.

Box Okay

Everything is great!

This is a message with an icon.

Bigger message

This is another message with an icon.

Oops, something wrong happened!
Something might be wrong!
Do you need any help?
Here's more information.
<!-- Boxes -->
<div class="ch-box-container">
    <h3>Box Container</h3>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="ch-box">
    <h3>Box</h3>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="ch-box-lite">
    <h3>Box Lite</h3>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="ch-box-error">
    <h3>Box Error</h3>
    <p>Oops, something wrong happened!</p>
</div>

<div class="ch-box-warn">
    <h3>Box Warn</h3>
    <p>Something might be wrong!</p>
</div>

<div class="ch-box-help">
    <h3>Box Help</h3>
    <p>Do you need any help?</p>
</div>

<div class="ch-box-info">
    <h3>Box Info</h3>
    <p>Here's more information.</p>
</div>

<div class="ch-box-ok">
    <h3>Box Okay</h3>
    <p>Everything is great!</p>
</div>

<!-- Boxes with icons -->
<div class="ch-box-icon">
    <span class="ch-icon-truck"></span>
    <p>This is a message with an icon.</p>
</div>

<div class="ch-box-icon">
    <span class="ch-icon-heart"></span>
    <h3>Bigger message</h3>
    <p>This is another message with an icon.</p>
</div>

<div class="ch-box-icon ch-box-error">
    <span class="ch-icon-remove-sign"></span>Oops, something wrong happened!
</div>

<div class="ch-box-icon ch-box-warn">
    <span class="ch-icon-warning-sign"></span>Something might be wrong!
</div>

<div class="ch-box-icon ch-box-help">
    <span class="ch-icon-help-sign"></span>Do you need any help?
</div>

<div class="ch-box-icon ch-box-info">
    <span class="ch-icon-info-sign"></span>Here's more information.
</div>

Back to Boxes / Back to Top

Icons

  • ch-icon-search
  • ch-icon-heart
  • ch-icon-star
  • ch-icon-star-empty
  • ch-icon-user
  • ch-icon-th-large
  • ch-icon-th
  • ch-icon-th-list
  • ch-icon-ok
  • ch-icon-remove
  • ch-icon-zoom-in
  • ch-icon-zoom-out
  • ch-icon-cog
  • ch-icon-trash
  • ch-icon-time
  • ch-icon-repeat
  • ch-icon-refresh
  • ch-icon-lock
  • ch-icon-print
  • ch-icon-camera
  • ch-icon-pencil
  • ch-icon-map-marker
  • ch-icon-move
  • ch-icon-chevron-left
  • ch-icon-chevron-right
  • ch-icon-plus-sign
  • ch-icon-minus-sign
  • ch-icon-remove-sign
  • ch-icon-ok-sign
  • ch-icon-help-sign
  • ch-icon-info-sign
  • ch-icon-ban-circle
  • ch-icon-arrow-left
  • ch-icon-arrow-right
  • ch-icon-arrow-up
  • ch-icon-arrow-down
  • ch-icon-plus
  • ch-icon-minus
  • ch-icon-exclamation-sign
  • ch-icon-warning-sign
  • ch-icon-calendar
  • ch-icon-comment
  • ch-icon-chevron-up
  • ch-icon-chevron-down
  • ch-icon-key
  • ch-icon-comments
  • ch-icon-unlock
  • ch-icon-wrench
  • ch-icon-group
  • ch-icon-copy
  • ch-icon-paper-clip
  • ch-icon-reorder
  • ch-icon-truck
  • ch-icon-caret-down
  • ch-icon-caret-up
  • ch-icon-caret-left
  • ch-icon-caret-right
  • ch-icon-sort
  • ch-icon-sort-down
  • ch-icon-sort-up
  • ch-icon-envelope-alt
  • ch-icon-undo
  • ch-icon-comment-alt
  • ch-icon-comments-alt
  • ch-icon-phone
<span class="ch-icon-camera ch-icon-xx-large"></span>
<span class="ch-icon-camera ch-icon-x-large"></span>
<span class="ch-icon-camera ch-icon-large"></span>
<span class="ch-icon-camera"></span>

Back to Icons / Back to Top

Tags

<a class="ch-tag" href="#">Foo</a>
<a class="ch-tag" href="#">Bar</a>

Back to Tags / Back to Top

Pagination

<ul class="ch-pagination">
    <li><a type="prev" href="/2">Previous</a></li>
    <li><a href="/1">1</a></li>
    <li><a href="/2">2</a></li>
    <li class="ch-pagination-current"><a href="/3">3</a></li>
    <li><a href="/4">4</a></li>
    <li><a href="/5">5</a></li>
    <li><a type="next" href="/4">Next</a></li>
</ul>

Back to Pagination / Back to Top

Tables

Default

Table
Data Operation Seller Description Price Status Actions
02/04/2017 Sale mail@example.com Shopping at Mercado Libre $1200,30 Pending
02/04/2017 Purchase mail@example.com Shopping at Mercado Libre $1200,30 Pending
02/04/2017 Sale mail@example.com Shopping at Mercado Libre $1200,30 Pending
02/04/2017 Sale mail@example.com Shopping at Mercado Libre $1200,30 Pending
<table class="ch-datagrid" summary="Operations list">
    <caption>Table</caption>
    <thead>
        <tr>
            <th scope="col">Date</th>
            <!-- [...] -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>02/04/2017</td>
            <!-- [...] -->
        </tr>
    </tbody>
</table>

Controls

Table
Data Operation Seller Description Price Status Actions
02/04/2017 Sale mail@example.com Shopping at Mercado Libre $1200,30 Pending
02/04/2017 Purchase mail@example.com Shopping at Mercado Libre $1200,30 Pending
02/04/2017 Sale mail@example.com Shopping at Mercado Libre $1200,30 Pending
02/04/2017 Sale mail@example.com Shopping at Mercado Libre $1200,30 Pending
<table class="ch-datagrid-controls" summary="Operations list">
    <caption>Table</caption>
    <thead>
    <tr>
        <th scope="col">Date</th>
        <!-- [...] -->
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>02/04/2017</td>
        <!-- [...] -->
    </tr>
    </tbody>
</table>

Back to Tables / Back to Top

Loadings

<span class="ch-loading-small"></span>
<span class="ch-loading"></span>
<span class="ch-loading-large"></span>

Back to Loadings / Back to Top

Forms

Input

Input

* Required fields

Hint for current input
<form class="ch-form">
    <fieldset>
        <legend>Input</legend>
        <p class="ch-form-hint">* Required fields</p>

        <div class="ch-form-row">
            <label for="inpt">Input:</label>
            <input id="inpt" name="inpt" type="text" />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="inpt_rqd">Input required: <em>*</em></label>
            <input id="inpt_rqd" name="inpt_rqd" type="text" required />
        </div>

        <div class="ch-form-row ch-form-disabled">
            <label for="inpt_dis">Input disabled:</label>
            <input id="inpt_dis" name="inpt_dis" type="text" disabled />
        </div>

        <div class="ch-form-row ch-form-required ch-form-disabled">
            <label for="inpt_rqd_dis">Input required and disabled: <em>*</em></label>
            <input id="inpt_rqd_dis" name="inpt_rqd_dis" type="text" required disabled />
        </div>

        <div class="ch-form-row">
            <label for="inpt_ro">Input readonly:</label>
            <input id="inpt_ro" name="inpt_ro" type="text" value="Readonly value" readonly />
        </div>

        <div class="ch-form-row">
            <label for="inpt_ph">Input w/ placeholder:</label>
            <input id="inpt_ph" name="inpt_ph" type="text" placeholder="Placeholder text" />
        </div>

        <div class="ch-form-row">
            <label for="inpt_cust_size">Input w/ custom size:</label>
            <input id="inpt_cust_size" name="inpt_cust_size" type="text" size="5" />
        </div>

        <div class="ch-form-row">
            <label for="inpt_hint">Input w/ hint:</label>
            <input id="inpt_hint" name="inpt_hint" type="text" />
            <span class="ch-form-hint">Hint for current input</span>
        </div>
        
        <div class="ch-form-row">
            <label for="inpt_icon_inner">Input w/ inner icon:</label>
            <input class="ch-form-icon-input" id="inpt_icon_inner" name="inpt_icon_inner" type="password" />
            <span class="ch-form-icon-inner ch-icon-lock"></span>
        </div>
    </fieldset>

    <div class="ch-form-actions">
        <input class="ch-btn" id="inpt_smt" name="inpt_smt" type="submit" value="Submit" />
        <a href="#">Cancel</a>
    </div>
</form>

Textarea

Textarea

* Required fields

Hint for current textarea
<form class="ch-form">
    <fieldset>
        <legend>Textarea</legend>
        <p class="ch-form-hint">* Required fields</p>

        <div class="ch-form-row">
            <label for="txta">Textarea:</label>
            <textarea id="txta" name="txta" cols="40" rows="4"></textarea>
        </div>

        <div class="ch-form-row">
            <label for="txta_hint">Textarea w/ hint:</label>
            <textarea id="txta_hint" name="txta_hint" cols="40" rows="4"></textarea>
            <span class="ch-form-hint">Hint for current textarea</span>
        </div>

        <div class="ch-form-row">
            <label for="txta_cust_rows">Textarea w/ custom rows:</label>
            <textarea id="txta_cust_rows" name="txta_cust_rows" cols="40" rows="8"></textarea>
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="txta_rqd">Textarea required: <em>*</em></label>
            <textarea id="txta_rqd" name="txta_rqd" cols="40" rows="4" required></textarea>
        </div>

        <div class="ch-form-row ch-form-disabled">
            <label for="txta_dis">Textarea disabled:</label>
            <textarea id="txta_dis" name="txta_dis" cols="40" rows="4" disabled></textarea>
        </div>

        <div class="ch-form-row ch-form-required ch-form-disabled">
            <label for="txta_rqd_dis">Textarea required and disabled: <em>*</em></label>
            <textarea id="txta_rqd_dis" name="txta_rqd_dis" cols="40" rows="4" required disabled></textarea>
        </div>
    </fieldset>

    <div class="ch-form-actions">
        <input class="ch-btn" id="txta_smt" name="txta_smt" type="submit" value="Submit" />
        <a href="#">Cancel</a>
    </div>
</form>

Select

Select
Select multiple
<form class="ch-form">
    <fieldset>
        <legend>Select</legend>

        <div class="ch-form-row">
            <label for="sel">Select:</label>
            <select id="sel" name="sel">
                <option value="-1">Select an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="sel_rqd">Select required: <em>*</em></label>
            <select id="sel_rqd" name="sel_rqd" required pattern="[^-1]">
                <option value="-1">Select an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>

        <div class="ch-form-row ch-form-disabled">
            <label for="sel_dis">Select disabled:</label>
            <select id="sel_dis" name="sel_dis" disabled>
                <option value="-1">Select an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>

        <div class="ch-form-row ch-form-required ch-form-disabled">
            <label for="sel_rqd_dis">Select required and disabled: <em>*</em></label>
            <select id="sel_rqd_dis" name="sel_rqd_dis" required disabled>
                <option value="-1">Select an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>
    </fieldset>
    <fieldset>
        <legend>Select multiple</legend>

        <div class="ch-form-row">
            <label for="sel_mult">Select multiple:</label>
            <select id="sel_mult" name="sel_mult" size="2" multiple>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="sel_mult_rqd">Select required: <em>*</em></label>
            <select id="sel_mult_rqd" name="sel_mult_rqd" size="2" multiple required>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>
        </div>

        <div class="ch-form-row ch-form-disabled">
            <label for="sel_mult_dis">Select disabled:</label>
            <select id="sel_mult_dis" name="sel_mult_dis" size="2" multiple disabled>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>
        </div>

        <div class="ch-form-row ch-form-required ch-form-disabled">
            <label for="sel_mult_rqd_dis">Select required and disabled: <em>*</em></label>
            <select id="sel_mult_rqd_dis" name="sel_mult_rqd_dis" size="2" multiple required disabled>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>
        </div>
    </fieldset>

    <div class="ch-form-actions">
        <input class="ch-btn" id="sel_smt" name="sel_smt" type="submit" value="Submit" />
        <a href="#">Cancel</a>
    </div>
</form>

Checkbox

Checkbox

Checkbox

Checkbox required

Checkbox disabled

Checkbox required and disabled

Checkbox inside list box

Checkbox group

Checkbox group disabled

Checkbox group inside list box

<form class="ch-form">
    <fieldset>
        <legend>Checkbox</legend>

        <h4 class="ch-form-subtitle">Checkbox</h4>
        <div class="ch-form-options">
            <div class="ch-form-row">
                <input id="cb" name="cb" type="checkbox" value="1" />
                <label for="cb">Option</label>
            </div>
        </div>

        <h4 class="ch-form-subtitle">Checkbox required</h4>
        <div class="ch-form-options ch-form-required">
            <div class="ch-form-row">
                <input id="cb_rqd" name="cb_rqd" type="checkbox" value="1" required />
                <label for="cb_rqd">Option</label>
            </div>
        </div>

        <h4 class="ch-form-subtitle">Checkbox disabled</h4>
        <div class="ch-form-options ch-form-disabled">
            <div class="ch-form-row">
                <input id="cb_dis" name="cb_dis" type="checkbox" value="1" disabled />
                <label for="cb_dis">Option</label>
            </div>
        </div>

        <h4 class="ch-form-subtitle">Checkbox required and disabled</h4>
        <div class="ch-form-options ch-form-required ch-form-disabled">
            <div class="ch-form-row">
                <input id="cb_rqd_dis" name="cb_rqd_dis" type="checkbox" value="1" required disabled />
                <label for="cb_rqd_dis">Option</label>
            </div>
        </div>
        
        <h4 class="ch-form-subtitle">Checkbox inside list box</h4>
        <div class="ch-form-options ch-box-list">
            <div class="ch-form-row">
                <input id="cb_bl" name="cb_bl" type="checkbox" value="1" />
                <label for="cb_bl">Option</label>
            </div>
        </div>
        
        <h4 class="ch-form-subtitle">Checkbox group</h4>
        <div class="ch-form-options">
            <ul>
                <li class="ch-form-row">
                    <input id="cb_grp_1" name="cb_grp" type="checkbox" value="1" />
                    <label for="cb_grp_1">Option 1</label>
                </li>
                <li class="ch-form-row">
                    <input id="cb_grp_2" name="cb_grp" type="checkbox" value="2" />
                    <label for="cb_grp_2">Option 2</label>
                </li>
            </ul>
        </div>

        <h4 class="ch-form-subtitle">Checkbox group disabled</h4>
        <div class="ch-form-options ch-form-disabled">
            <ul>
                <li class="ch-form-row">
                    <input id="cb_grp_dis_1" name="cb_grp_dis" type="checkbox" value="1" disabled />
                    <label for="cb_grp_dis_1">Option 1</label>
                </li>
                <li class="ch-form-row">
                    <input id="cb_grp_dis_2" name="cb_grp_dis" type="checkbox" value="2" disabled />
                    <label for="cb_grp_dis_2">Option 2</label>
                </li>
            </ul>
        </div>
        
        <h4 class="ch-form-subtitle">Checkbox group inside list box</h4>
        <div class="ch-form-options ch-box-list">
            <ul>
                <li class="ch-form-row">
                    <input id="cb_bl_grp_1" name="cb_bl_grp" type="checkbox" value="1" />
                    <label for="cb_bl_grp_1">Option 1</label>
                </li>
                <li class="ch-form-row">
                    <input id="cb_bl_grp_2" name="cb_bl_grp" type="checkbox" value="2" />
                    <label for="cb_bl_grp_2">Option 2</label>
                </li>
            </ul>
        </div>
    </fieldset>

    <div class="ch-form-actions">
        <input class="ch-btn" id="cb_smt" name="cb_smt" type="submit" value="Submit" />
        <a href="#">Cancel</a>
    </div>
</form>

Radio

Radio

Radio group

Radio group disabled

Radio group inside list box

<form class="ch-form">
    <fieldset>
        <legend>Radio</legend>

        <h4 class="ch-form-subtitle">Radio group</h4>
        <div class="ch-form-options">
            <ul>
                <li class="ch-form-row">
                    <input id="rd_grp_1" name="rd_grp" type="radio" value="1" />
                    <label for="rd_grp_1">Option 1</label>
                </li>
                <li class="ch-form-row">
                    <input id="rd_grp_2" name="rd_grp" type="radio" value="2" />
                    <label for="rd_grp_2">Option 2</label>
                </li>
            </ul>
        </div>

        <h4 class="ch-form-subtitle">Radio group disabled</h4>
        <div class="ch-form-options ch-form-disabled">
            <ul>
                <li class="ch-form-row">
                    <input id="rd_grp_dis_1" name="rd_grp_dis" type="radio" value="1" disabled />
                    <label for="rd_grp_dis_1">Option 1</label>
                </li>
                <li class="ch-form-row">
                    <input id="rd_grp_dis_2" name="rd_grp_dis" type="radio" value="2" disabled />
                    <label for="rd_grp_dis_2">Option 2</label>
                </li>
            </ul>
        </div>
        
        <h4 class="ch-form-subtitle">Radio group inside list box</h4>
        <div class="ch-form-options ch-box-list">
            <ul>
                <li class="ch-form-row">
                    <input id="rd_bl_grp_1" name="rd_bl_grp" type="radio" value="1" />
                    <label for="rd_bl_grp_1">Option 1</label>
                </li>
                <li class="ch-form-row">
                    <input id="rd_bl_grp_2" name="rd_bl_grp" type="radio" value="2" />
                    <label for="rd_bl_grp_2">Option 2</label>
                </li>
            </ul>
        </div>
    </fieldset>

    <div class="ch-form-actions">
        <input class="ch-btn" id="rd_smt" name="rd_smt" type="submit" value="Submit" />
        <a href="#">Cancel</a>
    </div>
</form>

Large

Large
Hint for current textarea
<form class="ch-form ch-form-big">
    <fieldset>
        <legend>Large</legend>

        <div class="ch-form-row">
            <label for="inpt_lrg">Input:</label>
            <input id="inpt_lrg" name="inpt_lrg" type="text" size="50" />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="inpt_lrg">Input required: <em>*</em></label>
            <input id="inpt_lrg" name="inpt_lrg" type="text" size="50" required />
        </div>

        <div class="ch-form-row">
            <label for="inpt_lrg_icon_inner">Input w/ inner icon:</label>
            <input class="ch-form-icon-input" id="inpt_lrg_icon_inner" name="inpt_lrg_icon_inner"
                type="password" size="47" />
            <span class="ch-form-icon-inner ch-icon-lock"></span>
        </div>

        <div class="ch-form-row">
            <label for="txta_lrg_hint">Textarea w/ hint:</label>
            <textarea id="txta_lrg_hint" name="txta_lrg_hint" cols="60" rows="6"></textarea>
            <span class="ch-form-hint">Hint for current textarea</span>
        </div>
    </fieldset>

    <div class="ch-form-actions">
        <input class="ch-btn" id="lrg_smt" name="lrg_smt" type="submit" value="Submit" />
        <a href="#">Cancel</a>
    </div>
</form>

Misc

Misc
Hint for current input
- /
<form class="ch-form">
    <fieldset>
        <legend>Misc</legend>

        <div class="ch-form-row">
            <label for="misc_ph_cb">Misc:</label>
            <input id="misc_ph_cb" name="misc_ph_cb" type="text" />
            <input class="ch-form-checkbox-inline" id="misc_cb_il" name="misc_cb_il" type="checkbox" checked />
            <label class="ch-label-inline" for="misc_cb_il">
                Inline label and checkbox
            </label>
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="misc_rqd_ph_hint">Misc required: <em>*</em></label>
            <input id="misc_rqd_ph_hint" name="misc_rqd_ph_hint" size="35" type="email"
                placeholder="foo@bar.com" required />
            <span class="ch-form-hint">Hint for current input</span>
        </div>

        <div class="ch-form-row">
            <label for="misc_3inpt_sel_1">Misc:</label>
            <input id="misc_3inpt_sel_1" name="misc_3inpt_sel_1" type="text" size="20" placeholder="Foobar bar baz" />
            <input id="misc_3inpt_sel_2" name="misc_3inpt_sel_2" type="number" min="0" max="99" placeholder="55" />
            <select id="misc_3inpt_sel_3" name="misc_3inpt_sel_3">
                <option value="-1">Select an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>

        <div class="ch-form-row">
            <label for="misc_2inpt_sel_1">Misc:</label>
            <select id="misc_2inpt_sel_1" name="misc_2inpt_sel_3">
                <option value="-1">Select an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
            <input id="misc_3inpt_sel_2" name="misc_3inpt_sel_2" type="text" placeholder="Fooobar" />
        </div>

        <div class="ch-form-row ch-form-row-inline">
            <label for="misc_3inpt_1">Misc:</label>
            <input id="misc_3inpt_1" name="misc_3inpt_1" type="number" min="0" max="99" placeholder="12" /> -
            <input id="misc_3inpt_2" name="misc_3inpt_2" type="number" min="0" max="999999" placeholder="345678" /> /
            <input id="misc_3inpt_3" name="misc_3inpt_3" type="number" min="0" max="9" placeholder="9" />
        </div>

        <div class="ch-form-row ch-form-row-inline ch-form-required">
            <label for="misc_2inpt_rqd_1">Misc required: <em>*</em></label>
            <input id="misc_2inpt_rqd_1" name="misc_2inpt_rqd_1" type="number" min="0" max="99"
                placeholder="12" required />
            <input id="misc_2inpt_rqd_2" name="misc_2inpt_rqd_2" type="number" min="0" max="9999"
                placeholder="3456" required />
        </div>
    </fieldset>

    <div class="ch-form-actions">
        <input class="ch-btn" id="misc_smt" name="misc_smt" type="submit" value="Submit" />
        <a href="#">Cancel</a>
    </div>
</form>

Back to Forms / Back to Top