Question

I want my input textfields to look like plain old text until they are moused over.

I accomplish this with this little bit of code (also available here on jsbin)

layerTitleJq.hover( function( evt ) {
      layerTitleJq.css( 'border', "" );
   },
   function( evt ){ 
      layerTitleJq.css( 'border', 0 );
})

The aesthetic problem is that when you hover, the text in the textfield gets pushed over a pixel or two when the borders show up. Wondering how to keep that text in the exact same spot during hover.

Answer 1

You could toggle border-color instead:

layerTitleJq.hover( function( evt ) {
      $(this).removeAttr('style');
   },
   function( evt ){ 
      $(this).css( 'border-color', 'transparent' ); // invisible border
})

(demo)

But a better way would be to toggle a class. When the class is present make the border visible. See this.