Question

是否有一种简单的方法可以获得HTML textarea和一个输入类型=“text”来渲染（大约）相等的宽度（以像素为单位），这在不同的浏览器中有效？

CSS / HTML解决方案非常棒。我宁愿不必使用Javascript。

由于 /埃里克

Answer 1

你应该可以使用

.mywidth {
  width: 100px;   
}

<input class="mywidth">
<textarea class="mywidth"></textarea>

Answer 2

回答第一个问题（虽然已经回答死亡）：CSS宽度是你需要的。

但我想在答案中回答Gaius's question。 Gaius，你的问题在于你是在设置宽度的。这是一个很好的想法，但你需要记住em是基于字体大小。默认情况下，输入区域和文本区域具有不同的字体面和＆amp;大小。因此，当您将宽度设置为35em时，输入区域将使用其字体的宽度，而textarea则使用其宽度的字体。文本区域默认字体较小，因此文本框较小。设置宽度（以像素或点为单位），或确保输入框和textareas具有相同的字体和面。尺寸：

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}

<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

希望有所帮助。

Answer 3

其他人提到了这一点，然后删除了它。如果要在没有类的情况下以相同的方式设置所有textareas和文本输入的样式，请使用以下CSS（在IE6中不起作用）：

input[type=text], textarea { width: 80%; }

Answer 4

这是一个CSS问题：宽度包括边框和填充宽度，它们在不同的浏览器中具有不同的INPUT和TEXTAREA默认值，因此也可以使它们相同：

<!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规范的Box dimensions部分对此进行了描述，其中包含：

框宽度由左右边距，边框和填充以及内容宽度的总和给出。

Answer 5

使用CSS3使文本框和输入工作相同。请参阅jsFiddle。

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

Answer 6

是的，有。尝试做这样的事情：

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

两者都应该等同于相同的尺寸。您可以使用绝对大小（px），相对大小（em）或百分比大小来完成。

Answer 7

只是一个注意事项 - 宽度总是受到客户端发生的事情的影响 - PHP无法影响这些事情。

在元素上设置公共类并在CSS中设置宽度是最干净的选择。

Answer 8

使用CSS类作为宽度，然后将元素放入HTML DIV，具有上述类的DIV。

这样，整体布局控制应该更好。

Answer 9

如Unequal Html textbox and dropdown width with XHTML 1.0 strict中所述，它还取决于您的doctype。我注意到当使用XHTML 1.0 strict时，确实会出现宽度差异。

Answer 10

input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }

Answer 11

现在，如果您使用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>

Answer 12

您还可以使用以下内容 CSS：

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML：

<input class="mywidth" >
<textarea></textarea>

有没有一种简单的方法可以使html textarea和输入类型文本同样宽？

12 个答案: