It is possible to expand a textarea only with CSS?
It is possible to make a textarea expandable by the user, using just CSS. In fact, in some modern browsers, such expandability is even the browser default. You can explicitly ask for it:
textarea { resize: both; }
Browser support is growing but is still limited.
There is typically just a small hint about resizability: a resize handle in the lower right corner. And I’m afraid most users won’t understand this hint.
You cannot make a textarea expand automatically by content using just CSS.
No it is not possible to do only with css, but you could use jquery:
$('#your_textarea').on('keydown', function(e){
var that = $(this);
if (that.scrollTop()) {
$(this).height(function(i,h){
return h + 20;
});
}
});
Instead of textarea
, you can use div
with contentEditable attribute:
div {
display: inline-block;
border: solid 1px #000;
min-height: 200px;
width: 300px;
}
<div contentEditable="true"></div>
DEMO