如何阻止此字段集溢出其容器？

Question

我有一个 css&html only 表单，在 codepen 上有多个字段集，但是只有这个带有 <textarea> 的字段集在调整 [=28] 的大小时溢出=].我尝试设置 resize: none; 和 95% 的最大宽度，但似乎没有任何效果。

这里是 HTML:

  <fieldset>
      <legend>Essay Section</legend>
      <div>
      <label for="essay_reasons">In 50 words or more explain why you want to apply for this course</label>
      </div>
      <div>
        <textarea id="essay_reasons" name="essay_reasons" rows="4" cols="55" placeholder="Enter text here">
        </textarea>
      </div>
    </fieldset>

css:

/*.  generic selectors.  */

.container {
  width: 85%;
  margin: 0 auto;
  max-with: 1184px;
}

div {
  margin-top: 1.5em;
}

/*.  specific design.  */
form {
  border-radius: 10px;
  border: 1px solid #777;
  padding: 1em 3em;
  margin-top: 10em;
  background-color: #fff;
}

input:focus {
  border: 2px solid red;
}

fieldset {
  margin: 1em auto;
  border: 0.5px solid #777;
}

textarea {
  resize: none;
  max-width: 95%;
}

Answer 1

使用 cols="value" 和 rows="value" 属性设置文本区域的样式，您将在不同的浏览器中实现一致的样式。但是与仅使用 CSS.

的样式相比，您将没有那么多的控制权

我会删除您的 textarea cols="55" 属性并在您的样式表中设置宽度 width: 100%：

textarea {
  resize: none;
  width: 100%;
}

<textarea id="essay_reasons" name="essay_reasons" rows="4" placeholder="Enter text here" />

如何阻止此字段集溢出其容器？

How to stop this fieldset from overflowing its container?

html

css

forms

textarea