我喜欢Chrome的漂亮textarea的大小调整控制。 然而，一个例外是，textarea的似乎有一个硬最小高度/ min的宽度设置，这不是通过自定义CSS多变，即使！重要的预选赛。
textarea#myTextArea{min-height:0 !important;min-width:0 !important}
是否有可能通过jQuery可能重写此？
Answer 1:
这些“ min-height / min-width ”依靠cols和rows属性。 例如。 如果cols丢失或小于1，它的默认值是20，所以最小宽度将是20个字符的宽度。
（参见http://www.w3.org/TR/html5/forms.html#the-textarea-element ）
你不能调整一个事实textarea在其初始尺寸被报告为一个bug（ https://code.google.com/p/chromium/issues/detail?id=94583 ）尽管
用户代理可以限制调整大小至合适的东西，如元素的原始格式的大小，并足够大以包含所有元素的内容之间。
http://www.w3.org/TR/css3-ui/#resize
不幸的是，似乎没有办法，现在要改变这种行为。
Answer 2:
另一个JavaScript的解决方案：
演示 ： http://jsfiddle.net/nz8ut/2/
function resizableStart(e){
this.originalW = this.clientWidth;
this.originalH = this.clientHeight;
this.onmousemove = resizableCheck;
this.onmouseup = this.onmouseout = resizableEnd;
}
function resizableCheck(e){
if(this.clientWidth !== this.originalW || this.clientHeight !== this.originalH) {
this.originalX = e.clientX;
this.originalY = e.clientY;
this.onmousemove = resizableMove;
}
}
function resizableMove(e){
var newW = this.originalW + e.clientX - this.originalX,
newH = this.originalH + e.clientY - this.originalY;
if(newW < this.originalW){
this.style.width = newW + 'px';
}
if(newH < this.originalH){
this.style.height = newH + 'px';
}
}
function resizableEnd(){
this.onmousemove = this.onmouseout = this.onmouseup = null;
}
var els = document.getElementsByClassName('resizable');
for(var i=0, len=els.length; i<len; ++i){
els[i].onmouseover = resizableStart;
}
上面的解决方案使用mouseover和mouseout触发resizableStart和resizableEnd 。 的问题是，如果被调整的元件具有孩子的，当鼠标被放置在子，该元件接收一个mouseout事件和，只是在此之后，它接收mouserover从孩子气泡事件。
为了避免我已经实现与其他解决方案这些事件mouseenter和mouseleave事件：
演示 ： http://jsfiddle.net/nz8ut/3/
Answer 3:
这里就是你要找的答案。 这是我原来的解决方案，让您在这里第一次看到它！
我已经做了以下的代码是其最基本的形式。 我已经简化它删除Javascript库我通常连同其他自定义的东西，我不得不解释使用。 这是无需任何外部的库等的溶液
这个怎么运作？
它补充说，检查是否textarea的大小已经改变而鼠标光标位于它的间隔。 如果它改变我们知道用户拖动，所以我们强制由1px的被1像素textarea的大小。 这为用户创建一个非常轻微的闪烁，而是因为他们拖着大小立即返回到它们拖动到尺寸，只是现在，它将被1px的收缩一路下跌到1px的。
代码
演示 ： http://jsfiddle.net/greatbigmassive/zJ4z5/5/
function TA_start(id){
var ta = document.getElementById(id);
if(typeof(ta.resizeCheckStarted) == "undefined"){
ta.resizeCheckStarted = true;
ta.resizeUpdated = false;
var cs = window.getComputedStyle(ta,null);
ta.originalH = cs.getPropertyValue("height");
ta.originalW = cs.getPropertyValue("width");
ta.originalM = cs.getPropertyValue("margin");
ta.style.width = ta.originalW;
ta.style.height= ta.originalH;
ta.style.margin= ta.originalM;
ta.resizeCheck = setInterval("TA_checkMe('"+id+"')",100);
}
}
function TA_checkMe(id){
var ta = document.getElementById(id);
if(ta.originalW != ta.style.width || ta.originalH != ta.style.height){
ta.resizeUpdated = true;
ta.originalW = ta.style.width;
ta.originalH = ta.style.height;
ta.style.width="1px";
ta.style.height="1px";
clearInterval(ta.resizeCheck);
}
}
function TA_stop(id,init){
var ta = document.getElementById(id);
if(typeof(init)=="undefined"){
if(typeof(ta.stopResizeCheck)=="undefined"){
ta.stopResizeCheck = setTimeout("TA_stop('"+id+"',true)",500);
}
} else {
clearInterval(ta.resizeCheck);
if(ta.resizeUpdated != true){
delete ta.resizeCheckStarted;
}
}
}
修正：
一个）。 它不缩水第一次B）。 你不需要用任何额外的CSS
文章来源: Custom CSS to allow chrome textarea resize smaller than initial state?
