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


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:

  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

Comentarios (1)

  1. jose dice:

    Los porcentajes en una web, siempre dan problemas... Es mejor fijar un cuadro de Xpixeles y luego hacer que se expanda hacia abajo. Para ello podemos usar "overflow:hidden;"
    Un saludo :$

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