Yesterday I was tasked with fitting a new design on a very old site. As expected, the existing site made heavy use of the rows, cols and size attributes for textareas and inputs (not that there's anything wrong with that). The difficulty for me stemmed from the tight specifications on the design – form field sizes really needed to be consistent across all browsers.
Enter jQuery. Since there wasn't a clear CSS solution, I decided the easiest way to do this was with JavaScript, in particular, jQuery. By looping over all form fields and assigning a "hard" width and height based on their rows and cols values.
function hardSizeInputs(multiplier, defaultWidth, defaultHeight) {
if(typeof defaultWidth=== 'undefined')
var defaultWidth = 10;
if(typeof defaultHeight=== 'undefined')
var defaultHeight = 1;
$('textarea,input').each(function() {
$(this).css( { width: ($(this).attr('cols') || $(this).attr('size') || defaultWidth) * multiplier,
height: $(this).attr('rows') || defaultHeight * multiplier } );
});
}