Ensanchar cuadro de texto SIN MOVERLO!

[danyof]

Hola! que hay.

Vereis, quiero hacer un formulario con cuadros de texto de modo que al pasar el raton el grosor de cada cuadro de texto se duplique.

Mi problema es el que ilustra la siguiente imagen: en donde cada cuadrado representa un pixel, y el color gris representa el borde del cuadro de texto:

http://img511.yfrog.com/i/cuadricula.png/

Cuando el grosor tiene 1pixel esta correcto

Pero al agrandarlo a 2, el problema es que el propio cuadro de texto, donde se encuentra el TEXTO se mueve, ya que en realidad lo que se mantiene fijo es la esquina superior izquierda del elemento (marcada con uja cruz roja)

Yo lo que quiero es que lo que se quede fijo sea el punto azul, ya que al hacer este efecto, es molesto que el texto se este moviendo.

Lo he conseguido hacer moviendo la posicion del cuadro de texto un pixel a la izquierda y hacia arriba a la vez que aumento el grosor.

¿Que opinais de este metodo? ¿Funcionara bien en todos los navegadores?

En unas horas subo el codigo y la pagina para que lo probeis.

Gracias!