Tutorial Caixa de Contrato

Esses dias no Fórum do Flashmasters perguntaram como poderia fazer um campo de texto que não pudesse ser alterado, modificado. Mas que tivesse uma barra de rolagem.

A minha sugestão foi que ao invez de usar um textArea como ele queria, usa-se uma div mesmo, com overflow auto.

Exemplo:

CSS

#contrato {
width: 400px;
height: 500px;
padding: 10px;
overflow: auto;
border: 3px groove #CCCCCC;
background: #F1F1F1;
}

Você pode alterar o estilo da borda: estilos de borda css.

HTML

<div id=”contrato”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam massa. Donec bibendum quam a augue. Fusce rhoncus. Proin laoreet facilisis ipsum. Nunc mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque semper porta lorem. Nunc libero. Pellentesque sollicitudin. Integer tincidunt cursus nulla. Vivamus lacinia condimentum ipsum. Quisque lacus diam, scelerisque vitae, vestibulum id, elementum vitae, ante. Cras ipsum. Sed lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Uma encheção de lingüiça aí.

E com apenas algumas linhas no CSS você tem sua caixa de contrato personalizada.

Clique aqui para ver o exemplo.

2 thoughts on “Tutorial Caixa de Contrato

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s