CSS style textarea like textfield cross browser

Question

The following FIDDLE shows a series of inputs. The last is a textfield. On Firefox it looks different and renders differently based on padding (although less so on FIDDLE than without FIDDLE.

What CSS can be used to force it to behave like the inputs do cross browser

http://jsfiddle.net/JdKyr/2/

"although less so on FIDDLE than without FIDDLE" -- this is because JSFiddle applies a CSS Reset when you check the 'normalized CSS' box on left column. — Roddy of the Frozen Peas, Oct 05 '12 at 14:33
I am aware of that but that does not help me answer the question — Walrus, Oct 05 '12 at 14:34
They look identical in Firefox 13 on Windows7. The only browser I see any difference in is Chrome which can be fixed with [this](http://stackoverflow.com/questions/5235142/how-to-disable-resizable-property-of-textarea). — Roddy of the Frozen Peas, Oct 05 '12 at 14:36

score 1 · Answer 1 · answered Oct 05 '12 at 14:35

1

Use the following:

textarea { 
    resize: none; 
    font: /* same font declaration here as for the input fields*/
}

The rest looks okay for me. Check your modified fiddle.

answered Oct 05 '12 at 14:35

Christoph

50,121
21
99
128

CSS style textarea like textfield cross browser

1 Answers1