如何设置HTML文本框的大小?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (18)

如何设置HTML文本框的大小?

提问于
用户回答回答于

只需使用:

textarea {
    width: 200px;
}

input[type="text"] {
    width: 200px;
}

这取决于你所说的“文本框”是什么意思。

用户回答回答于

<input type="text" class="resizedTextbox" />

CSS:

.resizedTextbox {width: 100px; height: 20px}

请记住,文本框大小是W3C盒模型。我的意思是,文本框的高度和宽度是上面指定的高度/宽度属性的总和,加上填充高度/宽度和边框宽度。因此,文本框在不同浏览器中的大小将略有不同,这取决于不同浏览器中的默认填充。虽然不同的浏览器倾向于在文本框中定义不同的填充,但大多数重置样式表不倾向于包括<input />标签在他们的重置表,所以这是要记住的东西。

可以通过定义自己的填充来标准化这一点。下面是带有指定填充的CSS,因此文本框在所有浏览器中看起来都是一样的:

.resizedTextbox {width: 100px; height: 20px; padding: 1px}

我添加了1个像素填充,因为如果填充为0px,有些浏览器会使文本框看起来太拥挤。根据你的设计,你可能希望添加更多的填充,但强烈建议你自己定义填充,否则将由不同的浏览器自行决定。为了使浏览器之间更加一致,你还应该自己定义边框。

扫码关注云+社区