Formulários

Básico

.u-styled-form

Os elementos que compõem um formulário não recebem nenhum estilo por padrão.

Para aplicar o estilo do First.css , use a classe acima em um elemento que abrace todo seu formulário. Geralmente, a tag <form> é um bom lugar para isso.

<form class="u-styled-form">
    <div>
        <label for="email">Regular input</label>
        <input type="email" id="email" placeholder="Regular input">
    </div>
</form>

Cada elemento <div> dentro do .u-styled-form irá criar uma nova linha.

<input>

Os inputs possuem um estilo bem simples. Campos com :focus recebem apenas uma borda mais escura. E campos desabilitados recebem o tradicional fundo cinza.

<form class="u-styled-form">
    <div>
        <label for="input-1">Regular input</label>
        <input type="text" id="input-1">
    </div>
    <div>
        <label for="input-2">Regular input</label>
        <input type="text" id="input-2" disabled>
    </div>
</form>

Botões de radio

<input type="radio">

Botões de radio recebem um estilo personalizado elegante, com animações.

<form class="u-styled-form">
    <div>
        <input type="radio" name="fake-options" id="radio-1" disabled>
        <label for="radio-1">Disabled input</label>
    </div>
    <div>
        <input type="radio" name="fake-options" id="radio-2" checked disabled>
        <label for="radio-2">Disabled checked input</label>
    </div>
    <div>
        <input type="radio" name="radio-options" id="radio-3" checked>
        <label for="radio-3">Regular input</label>
    </div>
    <div>
        <input type="radio" name="radio-options" id="radio-4">
        <label for="radio-4">Regular input</label>
    </div>
</form>

Checkboxes

<input type="checkbox">

Checkboxes também recebem um estilo personalizado limpo, com transições suaves.

<form class="u-styled-form">
    <div>
        <input type="checkbox" id="checkbox-1" disabled>
        <label for="checkbox-1">Disabled input</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox-2" checked disabled>
        <label for="checkbox-2">Disabled checked input</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox-3" checked>
        <label for="checkbox-3">Regular input</label>
    </div>
</form>

.mod-plus, .mod-minus ou .mod-cross

Você também pode utilizar outro símbolo, além do tradicional checkmark.

<form class="u-styled-form">
    <div>
        <input type="checkbox" id="checkbox-1">
        <label for="checkbox-1">Regular input</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox-2" class="mod-plus">
        <label for="checkbox-2">Plus input</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox-3" class="mod-minus">
        <label for="checkbox-3">Minus input</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox-4" class="mod-cross">
        <label for="checkbox-4">Cross input</label>
    </div>
</form>

Interruptor

<input type="checkbox" class="u-input-switch">

Os checkboxes também podem ser apresentados como um interruptor. Quando estiver :checked, o interruptor troca sua cor para verde. Útil, bonito, e feito apenas com CSS.

<form class="u-styled-form">
    <div>
        <input type="checkbox" id="switch-1" class="u-input-switch">
        <label for="switch-1">Toggle switch</label>
    </div>
    <div>
        <input type="checkbox" id="switch-2" class="u-input-switch" checked>
        <label for="switch-2">Toggle switch</label>
    </div>
    <div>
        <input type="checkbox" id="switch-3" class="u-input-switch" checked disabled>
        <label for="switch-3">Disabled toggle switch</label>
    </div>
    <div>
        <input type="checkbox" id="switch-4" class="u-input-switch" disabled>
        <label for="switch-4">Disabled toggle switch</label>
    </div>
</form>

.mod-right

Você também pode jogar o interruptor para o lado direito com apenas uma classe.

<form class="u-styled-form">
    <div>
        <input type="checkbox" id="switch-5" class="u-input-switch mod-right">
        <label for="switch-5">Toggle switch on right</label>
    </div>
</form>

Validação com ícones

.has-feedback

Você pode incluir quatro ícones de feedback em seus input fields: requerido, sucesso, alerta e erro. Você precisa incluir a classe .has-feedback no campo para que o First.css inclua o ícone dentro do campo.

.mod-required

<form class="u-styled-form">
    <div>
        <label for="validation-1">Required Input</label>
        <input type="text" id="validation-1" placeholder="Required Input" class="has-feedback">
        <span data-icon="asterisk" class="input-validation mod-required"></span>
    </div>
</form>

.mod-success

<form class="u-styled-form">
    <div>
        <label for="validation-2">Input with success</label>
        <input type="text" id="validation-2" placeholder="Input with success" class="has-feedback">
        <span data-icon="checkmark" class="input-validation mod-success"></span>
    </div>
</form>

.mod-warning

<form class="u-styled-form">
    <div>
        <label for="validation-3">Input with warning</label>
        <input type="text" id="validation-3" placeholder="Input with warning" class="has-feedback">
        <span data-icon="attention" class="input-validation mod-warning"></span>
    </div>
</form>

.mod-error

<form class="u-styled-form">
    <div>
        <label for="validation-4">Input with error</label>
        <input type="text" id="validation-4" placeholder="Input with error" class="has-feedback">
        <span data-icon="cross" class="input-validation mod-error"></span>
    </div>
</form>

Visualizar senha

.password-visibility

Usando a combinação de HTML e CSS abaixo, você irá criar um simples revelador de senhas. Basta clicar no checkbox para alterar entre um campo de texto ou senha.

<form class="u-styled-form">
    <div class="password-visibility">

        <input type="checkbox" id="password-visibility">
        <label for="password-visibility">
            <span>Show</span> <span>Hide</span> password
        </label>

        <label for="custom-password">Password</label>
        <input type="password" id="custom-password" placeholder="••••••••">
        <input type="text" placeholder="password">

    </div>
</form>

*. O código acima faz quase tudo sozinho, com apenas CSS. Porém, você também vai precisar de um pequeno código JS para clonar a senha digitada em um campo para o outro. Um exemplo está incluído em nosso repositório no GitHub. Teste localmente.