【问题讨论】：
标签： javascript html css textarea
试试这两种方法：
.none::-webkit-resizer {
display: none;
}
.pic::-webkit-resizer {
background: url(http://www.zhangxinxu.com//study/image/selection.gif);
outline: 1px dotted #000;
}<textarea class="none"></textarea>
<textarea class="pic"></textarea>【讨论】：
-webkit- 浏览器中工作，firefox 等呢......
如果没有 resize:none; 属性，您将无法删除调整大小句柄。但是您可以在这些虚线上放置一个div（调整手柄大小）。在此处查看演示
textarea {
position: relative;
margin: 20px 0 0 20px;
z-index: 1;
}
.wrap {
position: relative;
display: inline-block;
}
.handle-hide {
height:12px;
width:12px;
position: absolute;background:#fff;
bottom: 2px;
right: 2px;
pointer-events: none;
z-index: 2;
}<div class="wrap">
<div class="handle-hide"></div>
<textarea placeholder="drag the cyan triangle..."></textarea>
</div>【讨论】：
使用 jQuery 这是可能的，我找到了一个 jQuery UI here
使用此源代码，您可以自定义文本区域
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Textarea</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-resizable-se {
bottom: 17px;
}
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
handles: "se"
});
});
</script>
</head>
<body>
<textarea id="resizable" rows="5" cols="20"></textarea>
</body>
</html>
通过添加简单地覆盖 CSS
<style>
.ui-icon, .ui-widget-content .ui-icon {
background-image: none;
}
</style>
之后：
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
【讨论】：
你好 HERE 是我回答的一个工作示例：
首先要指出这是基于 CSS3 resize，并非所有浏览器都完全支持。
HTML
<div class="resize_this">
<textarea class="no_dots"></textarea>
</div>
ENDS HTML
CSS3
.no_dots{
resize: none;
width: 100%;
height: 100%;
border:none;
}
.resize_this{
resize:both;
overflow: hidden;
border:2px solid black;
border-radius: 5px;
/*HERE PLACE DEFAULT SIZE FOR THE TEXTAREA*/
width: 50%;
height: 250px;
}
ENDS CSS3
希望能有所帮助 T04435
【讨论】：
您是否考虑过掩蔽解决方案？
这是一个基本示例（仅在 Chrome 上测试）：
textarea {
border: 1px solid #000;
box-shadow: inset .3em 0 #000,
inset -.3em 0 #000,
inset 0 .3em #000,
inset 0 -.3em #000;
padding: 10px;
}
演示：http://jsfiddle.net/onzqnk5v/
更新（基于 cmets）：
这个答案只是一个供考虑的概念。示例代码旨在说明概念，而不是作为最终解决方案。
【讨论】：
最后，我做到了。你可以用一个元素（例如span）等包裹textarea。见my demo。我没有使用任何 javascript 或 jquery，对于棘手的部分，我使用了 most browser 支持的指针事件。
【讨论】：
textarea
试试这个，但它的funny，涉及draggin 和div，
HTML 代码
<div id="d2" class="ui-widget-content" contenteditable>
I look like textarea :)
</div>
css代码
#d2{
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 300px;
height: 200px;
}
jquery 代码
$(function() {
$( "#d2" ).draggable({revert: function(obj){
if (obj === true) {
// success
return false;
}
else {
// reverting
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$("#d2").css("width", $("#d2").width()+xPos);
$("#d2").css("height", $("#d2").height()+yPos );
return true;
}
}});
});
上面的代码可以做你想做的事，但在不同的口味中，只需拖动以增加 textarea(这里是 div) 来调整大小。
【讨论】：