适合文本区域

Question

我正在做一个项目，我希望网站上的用户能够将文本输入到 w3-cells 中。

我使用的是 w3 单元格，因为它们会自动改变形状以适应页面，但我在让 textArea 自动改变布局形状时遇到了问题。

在我看来 HTML 甚至没有被 CSS 改变，但我在我的代码中找不到任何错误 :/.

注意：ideaText 的 textArea 的 CSS 工作正常；我的问题是 bodyCells。

HTML:

<div id="top">
  <div id="idea">
    <textArea id="ideaText" placeholder="Introduce your topic here...">
    </textArea>
  </div>
  <div id="body">
    <div class="w3-cell-row" id="bodyCells">
      <div id="evidence1" class="w3-container w3-red w3-cell">
        <textArea placeholder = "Write some stuff...">
        </textArea>
      </div>
      <div id="evidence2" class="w3-container w3-green w3-cell">
        <textArea></textArea>
      </div>
      <div id="evidence3" class="w3-container w3-yellow w3-cell">
        <textArea></textArea>
      </div>
      <div id="evidence4" class="w3-container w3-blue w3-cell">
        <textArea></textArea>
      </div>
      <div id="evidence5" class="w3-container w3-purple w3-cell">
        <textArea></textArea>
      </div>
    </div>
  </div>

CSS:

#idea{
  background: #b35900;
  height: 150px;
}

textArea#ideaText{
  background: rgba(0,0,0,0.2);
  width: 100%;
  height: 150px;
  font-size: 28px;
}

textArea#bodyCells{
  background: rgba(0,0,0,0.2);
  width: 100%;
  height: 150px;
  font-size: 28px;
}

 .w3-cell-row#bodyCells{
   height: 150px;
 }

Answer 1

您的 css 选择器有误，没有 "catch" 您想要的 html 元素。您的 html 中没有 textArea#bodyCells。 textArea#bodyCells 搜索 <textArea id="bodyCells">，它在您的视图中不存在。这就是为什么看起来 css 对于该元素根本不起作用的原因。

顺便说一句，我建议您只在 css 选择器中使用类（不带 ID）。更简单的选择器将更容易维护和开发。 :)

Answer 2

这只是选择器顺序上的一个小错误。您输入的内容：

textArea#bodyCells{}

应该是什么：

#bodyCells textArea{}

Here's your code如你所愿地工作......我希望。

:)

适合文本区域

Form Fitting TextArea

html

css

layout

textarea