html - 样式化空文本区域高度

Question

我正在尝试将 textarea 放入我的布局中。但是，当它只有占位符为空时，似乎添加了一个额外的行。我希望摆脱它，因为它破坏了我的布局。我无法设置固定高度，因为文本区域根据文本输入是可变的。

这是截图。

这里是 Safari 中显示的所有规则(我省略了那些不活动的)。

CSS:

min-height: 36px;
padding: 16px;
margin-right: 16px;
box-sizing: border-box;
font-size: 14px;
max-height: 100px;
overflow: hidden;
resize: none;
width: 80%
-webkit-appearance: textarea;
background-color: white;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: initial;
border-right-color: initial;
border-bottom-color: initial;
border-left-color: initial;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
cursor: auto;
white-space: pre-wrap;
word-wrap: break-word;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 0em;
font-style: normal;
font-weight: 400;
font-family: -apple-system;
font-variant: normal;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-writing-mode: horizontal-tb !important;
list-style: none;

感谢您的帮助!

编辑:这是没有应用最小高度和填充的相同元素。

Answer 1

大多数浏览器将文本区域的默认行设置为 2 行，您可以在此处看到:https://www.w3.org/wiki/HTML/Elements/textarea .

没有 css 属性可以修改文本区域中的行数。

如果您真的需要 1 行，您可以设置 rows='1'，然后使用 javascript 在用户输入时动态添加更多行。你可以在这里找到一个例子:add new row to textarea input while editing