How to disable the resize grabber of textarea ?
Just use resize: none
textarea {
resize: none;
}
You can also decide to resize your textareas only horizontal or vertical, this way:
textarea { resize: vertical; }
textarea { resize: horizontal; }
Finally,resize: both
enables the resize grabber.
How to change cursor for resizable textarea?
This is rendered by browser itself cant be designed using css
How can I change the look of resize handles?
This is a tough one. There is no way of styling this specific control. Even if you force a different appearance under webkit you still get the damn resize handle:
http://jsfiddle.net/qw73n/
You can, however, work around it and place a background image in the bottom left corner:
http://jsfiddle.net/q5kdr/
But the handler will still appear on top of it.
I'm afraid the only alternative is using jQuery UI resizable:
http://jqueryui.com/demos/resizable/
How do I disable the resizable property of a textarea?
The following CSS rule disables resizing behavior for textarea
elements:
textarea {
resize: none;
}
To disable it for some (but not all) textarea
s, there are a couple of options.
You can use class
attribute in your tag(<textarea class="textarea1">
):
.textarea1 {
resize: none;
}
To disable a specific textarea
with the name
attribute set to foo
(i.e., <textarea name="foo"></textarea>
):
textarea[name=foo] {
resize: none;
}
Or, using an id
attribute (i.e., <textarea id="foo"></textarea>
):
#foo {
resize: none;
}
The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.
Super important to know:
This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;
Quote by Sara Cope,
http://css-tricks.com/almanac/properties/r/resize/
How to disable textarea resizing?
You can use css
disable all
textarea { resize: none; }
only vertical resize
textarea { resize: vertical; }
only horizontal resize
textarea { resize: horizontal; }
disable vertical and horizontal with limit
textarea { resize: horizontal; max-width: 400px; min-width: 200px; }
disable horizontal and vertical with limit
textarea { resize: vertical; max-height: 300px; min-height: 200px; }
I think min-height
should be useful for you
Related Topics
How to Include View/Partial Specific Styling in Angularjs
Select All Child Elements Recursively in Css
Make the First Character Uppercase in Css
"Text-Align: Justify;" Inline-Block Elements Properly
How to Make a Div Unselectable
How to Insert a Line Break Before an Element Using Css
Css: Fixed Position on X-Axis But Not Y
Css3 Cross Browser Linear Gradient
Wait For Fonts to Load Before Rendering Web Page
Twitter Bootstrap Multilevel Dropdown Menu
Css Background Opacity With Rgba Not Working in Ie 8
Repeat Table Headers in Print Mode
What Are the Rules For CSS Media Query Overlap
Cross Site Scripting in CSS Stylesheets
How to Make a Sticky Footer Using Css
Css: Set a Background Color Which Is 50% of the Width of the Window