我需要在谷歌浏览器中调整文本字段的大小。我希望能够水平和垂直拖动文本字段的末尾。
到目前为止，这是我尝试过的。我能够在文本字段的一 Angular 看到调整大小图标，但无法以任何一种方式移动它。我已经使用了 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>
最佳答案
根据规范，您可以通过设置 <input type=text> 来调整任何元素(包括 overflow 元素)的大小。属性为 visible 以外的任何值, 除了设置 resize属性(property)。
实际上，即使是支持 resize 的浏览器属性(property)在其适用性上可能有限制。 Chrome 不会生成 <input type=text>如果您执行上述操作，元素可调整大小。这可能是一个错误，因为它显然正在尝试这样做:出现一个调整大小的句柄。另一方面，即使您只是设置 resize，Safari 也可以调整大小。 , 没有设置 overflow .
有一个似乎适用于 Chrome 的解决方法，尽管它很笨拙而且看起来不够健壮。把 input div 中的元素, 并制作 div可调整大小并设置 input宽度接近 100%。不是 100%，因为这会把事情搞砸(没有调整大小 handle 的空间)。像这样:
<div style="resize: horizontal; width: 15em;
overflow: auto; border: solid gray 1px">
<input style="width: 96%; border: none; resize: none">
</div>
关于css - 如何在 Chrome 中调整文本字段的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12191265/