CSSLab

Un laboratorio de ideas para la web en español

Publicado:

12345678910111213141516171819202122232425262728293031

Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic

200520062007200820092010201120122013

Comentarios:

0 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519

☺ Si te gusta el contenido de este sitio, puedes aportar para seguir desarrollando y compartiendo. ☺

Categorías

Tip Precoz 7: resize textarea

Si usas seguido Safari ó Chrome, habrás notado que estos browsers permiten -por defecto- que el <textarea> sea redimensionado por el usuario a través del arrastre en el rincón inferior-derecho. Esta es una propiedad de WebKit de accesibilidad que puede perjudicar el layout de nuestro lindo formulario.

Para quitarlo, basta declarar en CSS:

textarea {
  resize: none;
}

Ver ejemplo
(En Safari-Chrome)

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Cómo no usar más iframe

12/11/2007

Estuvieron de moda. Fueron la sensación. Pero como muchas otras etiquetas, perdieron su reinado dado a que no eran accesibles y mal indexado por los buscadores. Pero no totalmente, ya que suelen ser bastante útiles para refrescar datos dinámicos, sin tener que hacer un reload del sitio completo. ¿Te suena esta teoría de algún lugar? [...]

➜

Tip Precoz: Background al 100% con CSS3

29/03/2012

Entramos en una era donde cada vez más podemos aprovechar las bondades de CSS3 sin tener que parchar funcionalidad con scripts y plugins de JavaScript. En esta ocasión, utilizaremos una propiedad CSS3 para hacer que una imagen de fondo cubra el 100% de la ventana, escalándose hasta adaptarse. Afortunadamente los browsers están aplicando suavizado a [...]

➜

La descendencia del CSS

6/12/2007

Como verán, hasta las Hojas de Estilo en Cascada tienen descendencia. A través de CSS podemos reconocer las etiquetas que en la estructura HTML pertenecen o están contenidas dentro de otra etiqueta, y aplicarles estilos determinados. En CSS estos se llaman Selectores Descendentes. Pero me gustaría dejar claro desde el principio que 2 de estos [...]

➜

que simple, buenisimo!!!

Felipe
19 / Julio / 2010
Buenísimo el tip, pero lamentablemente la version Beta de Firefox 4 no respeta esta caracteristica

Saludos y muchas gracias por todos tus buenos consejos !!!

Juanin
19 / Julio / 2010
Igual la idea de ese feature es agregar una comodidad para el usuario, no creo que valga la pena sacarlo por cuidar el layout… si alguien lo intenta usar es porque lo debe necesitar.

jmn
19 / Julio / 2010
estuve pensando en incluirlo en mi CSS Reseter v2 pero como bien dice jmn puede q sirva, aunq es un feature arbitrario y sólo aplicable a algunos browsers. Enfin hay una delgada linea y lo meditare un poco más.

Jorge Epuñan
19 / Julio / 2010
Excelente, muy bueno el tip

Juan J. GOMEZ
19 / Julio / 2010
no estoy seguro, pero “rezise” , en un validador standar, lo toma como error.

leviatan
20 / Julio / 2010
Que bueno, no lo conocía. Yo suelo usar los max-height y max-width para limitar ese comportamiento. Normalmente limito el ancho para que no sea posible destrozar el layout.

Un saludo!

ignatius
24 / Julio / 2010
Hola, me gusta mucho de blog, pero hace tiempo que no lo visitaba, me doy cuenta que cambiaste el diseño, pero hay algo que “creo” que no esta, o al menos no lo encuentro y es el enlace para poder ver los anteriores post’s.

h r m
28 / Julio / 2010
Hola, ¿como hiciste ese antibot que tenes que arrastrar una imagen a un área determinada?

Brian
16 / Octubre / 2010
Brian: es un plugin, Ajax Fancy Captcha.

Jorge Epuñan
21 / Octubre / 2010
Buenas noches… una consulta, espero no fuera mucho del tema. Quiero aplicar esto a mi blog en blogger para el formulario de comentarios incrustrado en página. Lo hacen con un iframe. ¿cómo podría hacer que la página que carga el iframe “herede” el CSS de la página principal?. Porque obviamente si pongo

textarea {resize:none;}

dentro del CSS del blog, no pasa nada porque el textarea es cargado desde un iframe, y por eso estoy buscando la forma de que hereden o forzar a utilizar el CSS del blog.

¿Alguna idea o de plano no se puede?

Espero haberme explicado bien
un saludo desde el Perú

María Claudia
22 / Abril / 2011
María Claudia: Lamentablemente lo q pides no es posible, no puedes intervenir el CSS dentro de un iframe desde una pagina padre, o vice-versa.

Jorge Epuñan
22 / Abril / 2011