有没有一种简单的方法来使HTML textarea和input type="text"大致相等的宽度(以像素为单位)在不同的浏览器中呈现,CSS/HTML方案最好。我希望不要使用JavaScript。
谢谢 /Erik
.mywidth {
width: 100px;
}
<input class="mywidth">
<br>
<textarea class="mywidth"></textarea>
.mywidth {
width: 35em;
font-family: Verdana;
font-size: 1em;
}
<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>
有人提到过这个问题,但是又删了。如果你想要统一样式所有的文本区域和文本输入框,而不使用类名,请使用以下CSS(在IE6中无效):
input[type=text], textarea { width: 80%; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>
这在CSS规范的盒模型部分中有详细描述,其中指出:
盒子宽度由左右边距、边框、内边距和内容宽度之和确定。
使用CSS3使文本框和输入框的工作方式相同。请参见jsFiddle。
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
是的,有的。尝试做这样的事情:
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
两者应该相等。您可以使用绝对尺寸(px)、相对尺寸(em)或百分比尺寸。
现在,如果您使用Bootstrap,请给您的输入字段添加form-control
类。就像这样:
<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">
<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>
input[type="text"] { width: 60%; }
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
请注意 - 宽度始终受客户端发生的某些事情的影响 - PHP 无法影响这些事情。
在元素上设置一个公共类并在 CSS 中设置宽度是最干净的选择。