Vue.js页面中input元素resize属性不生效问题求助

为什么input的resize不生效？ #

CSS的resize属性仅对块级元素（或overflow不为visible的行内块元素）生效，而<input type="text">属于行内替换元素，浏览器默认不支持对它应用拖拽调整大小的功能——这就是你在button上能用、input上失效的核心原因。

两种可行的解决办法 #

方法1：用textarea替代input（最简单）

textarea是块级元素，天生支持resize，只需设置rows="1"就能模拟单行输入的效果，同时保留拖拽功能：

<div class="directioncolumn">
  <label for="message">Message*</label>
  <textarea class="message" id="message" rows="1" required></textarea>
</div>

CSS可微调高度适配单行：

.message {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
  max-width: 100%;
  min-height: calc(1em + 40px); /* 适配padding和字体高度 */
}

方法2：给input套可拖拽的容器

如果必须保留input标签，就给它加一个外层容器，把resize属性应用在容器上，让input自适应容器大小：

<div class="directioncolumn">
  <label for="message">Message*</label>
  <div class="input-resizer">
    <input class="message" id="message" type="text" required />
  </div>
</div>

对应的CSS：

.input-resizer {
  border: 2px solid;
  padding: 0;
  width: 300px;
  resize: both;
  overflow: auto;
  max-width: 100%;
}
.message {
  width: 100%;
  height: 100%;
  border: none;
  padding: 20px;
  outline: none; /* 去掉输入框默认聚焦边框 */
}

内容的提问来源于stack exchange，提问作者Azciop