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
<!-- 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>