Another CSS based option is to use the media attribute and do something like:
<link rel="stylesheet" type="text/css" href="css/style.css"><link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"><link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css"><link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css">
Then set a different size in the #id of the input box in each CSS file that has a media attribute. That way you will have responsive design elements based on the viewport. I have not tested this in IE.