jquery - Custom CSS to allow chrome textarea resize smaller than initial state?

Question

I like Chrome's nifty textarea resize control. However, the one exception is that the textarea appears to have a hard min-height/min-width setting that's not changeable via custom css, even with !important qualifiers.

textarea#myTextArea{min-height:0 !important;min-width:0 !important}

Is it possible to override this via jQuery perhaps?

Answer 1

These "min-height/min-width" rely on cols and rows attributes. Eg. if cols is missing or less than 1, its default value is 20, so the minimum width will be 20 characters width.

(cf. http://www.w3.org/TR/html5/forms.html#the-textarea-element)

The fact you cannot resize a textarea under its initial dimensions is reported as a bug (https://code.google.com/p/chromium/issues/detail?id=94583) although

The user agent may restrict the resizing range to something suitable, such as between the original formatted size of the element, and large enough to encompass all the element's contents.

http://www.w3.org/TR/css3-ui/#resize

Unfortunately it seems there's no way for now to change this behaviour.