Question

我需要在Google Chrome中调整文本字段的大小。我想能够水平拖动文本字段的末尾＆amp;垂直。

这是我到目前为止所尝试的。我能够在文本字段的角落看到调整大小图标，但无法以任何方式移动它。我用style="resize:horizontal;"有些人可以告诉我哪里出错了...... 感谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Text Feilds</title>
       <script type="text/javascript">
       </script>
 </head>
<body>
<table>
<tr>
<td>
<input type="text" id="txt1" style="resize:horizontal;" />
<input type="text" id="txt2" style="resize:both;" />
<input type="text" id="txt3" style="resize:vertical;"/>
</td>
</tr>
</table>

</body>
</html>

Answer 1

根据规范，除了设置{{<input type=text>之外，您还可以通过将overflow属性设置为visible以外的任何值来调整任何元素（包括resize元素）的大小。 1}}属性。

实际上，即使支持resize属性的浏览器也可能对其适用性有限制。如果您执行上述操作，Chrome无法调整<input type=text>元素的大小。这可能是一个错误，因为它显然正在尝试这样做：出现一个调整大小句柄。另一方面，Safari可以调整大小，即使您只是设置了resize，而没有设置overflow。

有一种似乎可以在Chrome上运行的解决方法，虽然它看起来很笨拙而且不健壮。将input元素放在div内，并使div可调整大小，并将input宽度设置为接近100％。不完全是100％，因为这会搞砸事情（没有调整大小句柄的余地）。像这样：

<div style="resize: horizontal; width: 15em; 
            overflow: auto; border: solid gray 1px">
  <input style="width: 96%; border: none; resize: none">
</div>

Answer 2

改为使用textarea元素。

Example here

Answer 3

resize是html输入类型text的非样式属性。因此，这意味着您正在尝试为文本输入标记分配错误的属性。

检查此link以获取更多详细信息。从链接

适用于除了可见
之外的'溢出'的元素

在其他答案中使用textarea作为解释。

如何在Chrome中调整文本字段的大小？

3 个答案: