Morton 19 de Septiembre de 2012 a las 06.20
   Imprimir artículo
elWebmaster.com

CSS3: Cómo ajustar correctamente el ancho de un cuadro de texto

CSS, texto, cuadro, CSS3, ancho, ajustar, box-sizing, border-box

css3wide1No hay dudas que el CSS nos permite realizar cosas soñadas en nuestro sitio web, pero en algunos detalles puede resultar todo un problema. Por ejemplo, trabajar con anchos de cuadros de texto,  puede ser problemático.

A simple vista, uno pensaría que con tan sólo incorporar "width:100%" a sus páginas, el problema se ha solucionado. Pero no es así, ya que debemos asegurarnos que el cambio persista a pesar de los cambios en su elemento padre. Es por eso que el código CSS correcto es el siguiente:

PLAIN TEXT
  1. textarea {
  2.     -webkit-box-sizing: border-box;
  3.     -moz-box-sizing: border-box;
  4.     box-sizing: border-box;
  5.  
  6.     width: 100%;
  7. }

Al configurar el valor box-sizing a border-box permite al área de texto respetar el tamaño del elemento contenedor padre, el padding y sus bordes, recalculando lo que 100% realmente significa.

Haz clic aquí para ver una demostración >>

Fuente original del artículo: David Walsh Blog
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión