html - 当文本区域位于网格容器中时如何使 cols =""工作

Question

当 textarea 元素位于网格容器中时，Chrome 和 Firefox 似乎都不遵守 cols 属性:

.grid { display: grid; }

textarea:not([cols]) { width: 100%; }

<h2>Not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>In a grid container:</h2>

<div class="grid">
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

正如我所料，rows 属性得到了尊重。

我需要一个 texarea，当 在 网格容器内时，如果 cols 不存在，则尊重 cols , 占可用宽度的 100%。

Answer 1

你需要一个 block 元素父元素来修复它。

.grid {
  display: grid;
}

textarea:not([cols]) {
  width: 100%;
}

<h2>Not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>In a grid container:</h2>

<div class="grid">
  <div>
    <textarea cols="10" rows="10">some dummy text</textarea>
  </div>
  <textarea>some other text</textarea>
</div>