open menu

Forms

Input, Textarea & Select

<form>
    <div class="input-field black-input">
        <span class="user-icon"></span>
        <input type="text" />
    </div>

    <div class="input-field black-input">
        <span class="email-icon"></span>
        <input type="email" placeholder="Enter your email..." />
    </div>

    <div class="input-field black-input">
        <select>
            <option value="">Unnamed</option>
            <option value="">Unnamed</option>
            <option value="">Unnamed</option>
        </select>
    </div>

    <div class="input-field black-input text-area-field">
        <span class="edit-icon"></span>
        <textarea></textarea>
    </div>
</form>
<form>
    <div class="input-field green-input">
        <span class="user-icon"></span>
        <input type="text" />
    </div>

    <div class="input-field green-input">
        <span class="email-icon"></span>
        <input type="email" placeholder="Enter your email..." />
    </div>

    <div class="input-field green-input">
        <select>
            <option value="">Unnamed</option>
            <option value="">Unnamed</option>
            <option value="">Unnamed</option>
        </select>
    </div>

    <div class="input-field green-input text-area-field">
        <span class="edit-icon"></span>
        <textarea></textarea>
    </div>
</form>
<form class="row">
    <div class="input-field orange-input">
        <span class="user-icon"></span>
        <input type="text" />
    </div>

    <div class="input-field orange-input">
        <span class="email-icon"></span>
        <input type="email" placeholder="Enter your email..." />
    </div>

    <div class="input-field orange-input">
        <select>
            <option value="">Unnamed</option>
            <option value="">Unnamed</option>
            <option value="">Unnamed</option>
        </select>
    </div>

    <div class="input-field orange-input text-area-field">
        <span class="edit-icon"></span>
        <textarea></textarea>
    </div>
</form>
<form class="row">
    <div class="input-field purple-input">
        <span class="user-icon"></span>
        <input type="text" />
    </div>

    <div class="input-field purple-input">
        <span class="email-icon"></span>
        <input type="email" placeholder="Enter your email..." />
    </div>

    <div class="input-field purple-input">
        <select>
            <option value="">Unnamed</option>
            <option value="">Unnamed</option>
            <option value="">Unnamed</option>
        </select>
    </div>

    <div class="input-field purple-input text-area-field">
        <span class="edit-icon"></span>
        <textarea></textarea>
    </div>
</form>

Checkox and radio buttons

<form>
    <label>
        <input type="checkbox" class="black-checkbox"/>
        <span></span>
    </label>
    <label>
        <input type="radio" name="yow" class="black-checkbox"/>
        <span></span>
    </label>
    <label>
        <input type="radio" name="yow" class="black-checkbox"/>
        <span></span>
    </label>
</form>
<form>
    <label>
        <input type="checkbox" class="green-checkbox"/>
        <span></span>
    </label>
    <label>
        <input type="radio" name="yow" class="green-checkbox"/>
        <span></span>
    </label>
    <label>
        <input type="radio" name="yow" class="green-checkbox"/>
        <span></span>
    </label>
</form>
<form>
    <label>
        <input type="checkbox" class="orange-checkbox"/>
        <span></span>
    </label>
    <label>
        <input type="radio" name="yow" class="orange-checkbox"/>
        <span></span>
    </label>
    <label>
        <input type="radio" name="yow" class="orange-checkbox"/>
        <span></span>
    </label>
</form>
<form>
    <label>
        <input type="checkbox" class="purple-checkbox"/>
        <span></span>
    </label>
    <label>
        <input type="radio" name="yow" class="purple-checkbox"/>
        <span></span>
    </label>
    <label>
        <input type="radio" name="yow" class="purple-checkbox"/>
        <span></span>
    </label>
</form>