Tamanhos

Há três maneiras de ajustar os tamanhos dos itens de formulário para atender melhor às necessidades específicas de cada caso.
Exceto por alguns itens personalizados.

fieldset > legend

Fieldset com legenda menor

formit sm

. .  .

Fieldset e legenda padrão

. .  .

Fieldset com legenda maior

formit lg

. .  .

<!-- classes direto no fieldset elemento -->
<fieldset class="formit sm"><legend>Fieldset com legenda menor</legend> ... </fieldset>
<fieldset><legend>Fieldset e legenda padrão</legend> ... </fieldset>
<fieldset class="formit lg"><legend>Fieldset com legenda maior</legend> ... </fieldset>

<!-- classes no elemento parent -->
<form class="formit sm">
    <fieldset><legend>Fieldset com legenda menor</legend> ... </fieldset>
</form>
<form class="formit lg">
    <fieldset><legend>Fieldset com legenda maior</legend> ... </fieldset>
</form>

<!-- classe formit no elemento parent e sm ou lg no fieldset -->
<form class="formit">
    <fieldset class="sm"><legend>Fieldset com legenda menor</legend> ... </fieldset>
    <fieldset><legend>Fieldset e legenda padrão</legend> ... </fieldset>
    <fieldset class="lg"><legend>Fieldset com legenda maior</legend> ... </fieldset>
</form>

inputs

<!-- classes direto no input -->
<input class="formit sm" placeholder="" type="" name="" />
<input placeholder="Padrão" type="" name="" />
<input class="formit lg" placeholder="" type="" name="" />

<!-- classes no elemento parent -->
<div class="formit sm">
    <input class="formit sm" placeholder="" type="" name="" />
</div>
<div class="formit lg">
    <input class="formit lg" placeholder="" type="" name="" />
</div>

<!-- classe formit no elemento parent e sm ou lg no input -->
<div class="formit">
    <input class="sm" placeholder="" type="" name="" />
    <input placeholder="Padrão" type="" name="" />
    <input class="lg" placeholder="" type="" name="" />
</div>

textarea e [contenteditable]

select

number




label



<label for="" class="formit sm">Menor</label>
<label for="">Padrão</label>
<label for="" class="formit lg">Maior</label>

Tamanhos para itens de formulário personalizados.

password

<div class="password formit sm">
    <input class="pswd" type="password" placeholder="Inserir senha" name="" value="oculto">
</div>
<div class="password">
    <input class="pswd" type="password" placeholder="Inserir senha" name="" value="oculto">
</div>
<div class="password formit lg">
    <input class="pswd" type="password" placeholder="Inserir senha" name="" value="oculto">
</div>

search

<form class="formit sm search" method="GET" action="">
    <input type="hidden" name="webship" value="packit.ui" />
    <input type="search" placeholder="form search menor" name="busca" />
    <button class="btn sm" type="submit">Procurar</button>
</form>
<form class="formit search" method="GET" action="">
    <input type="hidden" name="webship" value="packit.ui" />
    <input type="search" placeholder="form search menor" name="busca" />
    <button class="btn" type="submit"><span icon="search"></span></button>
</form>

<form class="formit search" method="GET" action="">
    <input type="hidden" name="webship" value="packit.ui" />
    <input type="search" placeholder="form search padrão" name="busca" />
    <button class="btn" type="submit">Procurar</button>
</form>
<form class="formit search" method="GET" action="">
    <input type="hidden" name="webship" value="packit.ui" />
    <input type="search" placeholder="form search padrão" name="busca" />
    <button class="btn" type="submit"><span icon="search"></span></button>
</form>

<form class="formit lg search" method="GET" action="">
    <input type="hidden" name="webship" value="packit.ui" />
    <input type="search" placeholder="form search maior" name="busca" />
    <button class="btn lg" type="submit">Procurar</button>
</form>
<form class="formit lg search" method="GET" action="">
    <input type="hidden" name="webship" value="packit.ui" />
    <input type="search" placeholder="form search maior" name="busca" />
    <button class="btn lg" type="submit"><span icon="search"></span></button>
</form>