防止textarea缩放字段集

Question

我有一个简单的表单，其中包含textarea输入。当我缩放textarea时，它会推动fieldset边界。如何从textarea比例解开fieldset比例。我希望这只适用于水平刻度。

HTML

<form>
    <fieldset>
        <legend>Description</legend>
        <label>Name</label>
        <input type="text">
        <p></p>
        <label>Describe the object</label>
        <textarea></textarea>
    </fieldset>
</form>

CSS

textarea {
  display: block;
  max-height: 200px;
  max-width: 350px;
}

jsfiddle

Answer 1

将max-height添加到fieldset，它将处理高度。 它不适用于宽度，因此您必须解决它并用div包装文本区域并将其max-witdh设置为fieldset的值。

<h1>Form Demo</h1>
  <p>
  <form>
    <fieldset>
      <legend>User Information</legend>
      <label>Sex</label>
      <input type="radio"
             name="sex"
             id="male"
             value="male"/>
      <label for="male">Male</label>
      <input type="radio"
             name="sex"
             id="female"
             value="female"/>
      <label for="female">Female</label>
    </fieldset>

    <fieldset class="DontGrow">
      <legend>Description</legend>
      <label>Name</label>
      <input type="text">
      <p></p>
      <label>Describe the object</label>
      <div class="DontGrowWidth">
          <textarea></textarea>
      <div>
    </fieldset>
  </form>

的CSS：

body {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-family: sans-serif;
}
label:nth-child(2) {
  font-weight:bold;
}

.DontGrow{
    height:160px;
    max-height:160px;

}

.DontGrowWidth{
      max-width: 300px;
}

}
fieldset {
  margin-top: 30px;
}
input {
  display: block;
}

textarea {
  display: block;
  max-height: 200px;
  max-width: 400px;
}

input[type=radio] {
  display: inline
}

Answer 2

这个问题不断重复

textarea {
    resize: none;
}

How to disable resizable property of textarea?

在提问之前先学习探索和搜索。谷歌吧！

Answer 3

我通过将textarea包装在div容器中并限制此容器的大小来解决我自己的问题。

<强> HTML

  <div class="textareas">
    <textarea></textarea>
  </div>

<强> CSS

.textareas {
  width: 300px;
}