Is there a css hack for Chrome to make <textarea> a certain height?

Question

I have a <textarea> that appears at different heights with all the browsers.
Is there a css hack for Chrome?

Answer 1

Chrome uses the webkit rendering engine, which is among the better rendering engines. It is about as compliant with HTML5 and CSS standards as you'll see in the wild today.

Your best bet is to write code focused on the standards-compliant browsers (Chrome, Safari, Opera, and Firefox) If you're not doing any super-crazy HTML5, you'll find all these browsers act pretty much the same. As a bonus, mobile browsers are generally based on webkit or opera, so you'll also have the mobile market covered.

Even Internet Explorer (by the time you get to version 8) plays along pretty well with most of the standards (again, assuming you're not doing HTML5 form elements or the video tag or something.) The problem is the older versions of IE, particularly IE6.

Write your CSS for standards-compliant browsers first. Then use a conditional comment to add a special exceptions stylesheet read only by IE6 and earlier. Put the CSS adjustments you need there to take care of IE6.

Best of luck to you....

Answer 2

Yes, but it's not "a hack" it's just CSS. Put a CSS selector on your textarea.

<textarea id="myTextBox" >Here is your text </textarea>

Then, add a css rule like so:

#myTextBox{
height: 150px;  //adjust this to desired height.
}

I haven't studied this, but I would guess that there just isn't an HTML standard default for the height of a TextArea. You can specify a row property as well, but I think you might still end up with a few pixels difference between the browsers. Using CSS height property WILL make them all the same...