Campo input

[italogabriel 0]

gostaria de saber como é o código que permita eu colocar bordas no input e aumentar o campo do mesmo

 

exemplo

[Diéssica 140]

HTML:

<input type="text">

CSS:

input {
padding:8px; /* margem interna */
border:3px solid #000; /* borda sólida */
font:12px Verdana; /* fonte do input */
}

Resultado :seta: http://jsfiddle.net/teYpT/

Utilizei padding para aumentar o campo, por ser mais compatível. Mas caso precise ser mais exato, pode utilizar width e/ou height, altura e largura, respectivamente.

 

CSS:

input {
width:200px; /* largura */
height:30px; /* altura */
border:3px solid #000; /* borda sólida */
font:12px Verdana; /* fonte do input */
} 

Resultado :seta: http://jsfiddle.net/teYpT/1/

 

Duas soluções juntas (margin + height + padding): http://jsfiddle.net/teYpT/2/ :thumbsup: Neste caso, vale a pena diminuir a altura do input.

 

Obs.: para estilizar apenas input do tipo texto, vale utilizar o [type=text] do CSS3. E caso queira estilizar apenas um, determine ao mesmo uma classe (.nome) ou id (#nome).

input[type="text"]

:bye:

[italogabriel 0]

Muito obrigada man agradecido.