manage Textarea resize options with CSS

Usually a textarea (inside an HTML form) is resizable – and that’s a good thing. But often that is just bit too much and a resizable textarea is likely to screw with your precious design. So every now and then you would probably want to control, in what way a textarea can be resized – or maybe you want to turn off the resize-option altogether. With CSS that is easily possible:

disable all resize-options:

textarea { resize: none; }

only vertical resize possible:

textarea { resize:vertical ; }

only horizontal resize possible:

textarea { resize:horizontal; } 

disable vertical resize but keep horizontal resize with a minimum and maximum width limit:

textarea { resize:horizontal; max-width:480px; min-width:240px; }

disable horizontal resize but keep vertical resize with a minimum and maximum height limit:

textarea { resize:vertical; max-height:480px; min-height:240px; )

Leave a Reply

Your email address will not be published. Required fields are marked *