Размер моей текстовой области в HTML по-прежнему можно изменять, несмотря на добавление «resize: none» в файле CSS в браузере Opera.

Question

Я пытаюсь стилизовать мою HTML-страницу и хочу, чтобы ввод текста был в тех же измерениях.

Я уже пытался указать селектор текстовой области в CSS, но он не работал в Opera.Метка изменения размера исчезла в Mozilla Firefox, но, к сожалению, размер текстовой области был не таким, как я хотел.

<textarea style="resize:none" rows="1" cols="22" th:id="inputWord" name="inputWord" ></textarea>

работает, но я не знаю, почему CSS не влияетздесь.

textarea {
  rows: 1;
  cols: 22;
  resize: none;
}

<div class="container">
  <div class="container-inner">
    <div class="area">
      <form th:action="@{/}" method="post">
        <textarea th:id="inputWord" name="inputWord"></textarea>
        <textarea th:id="inputTranslation" name="inputTranslation"></textarea>
        <textarea th:id="language" name="language" value="English"></textarea>
        <input type="submit" th:id="addWord" value="add" />
      </form>
    </div>
    <div class="area">
      <form th:action="@{/delete}" method="post">
        <textarea th:id="inputWordDelete" name="inputWordDelete"></textarea>
        <textarea th:id="inputTranslationDelete" name="inputTranslationDelete"></textarea>
        <textarea th:id="languageDelete" name="languageDelete" value="English"></textarea>
        <input type="submit" th:id="deleteWord" value="delete" />
      </form>
    </div>
  </div>
</div>

Answer 1

rows и cols являются атрибутами для <textarea>, а не свойствами CSS:

textarea {
  resize: none;
}

<div class="container">
  <div class="container-inner">
    <div class="area">
      <form th:action="@{/}" method="post">
        <textarea rows="1" cols="22" th:id="inputWord" name="inputWord"></textarea>
        <textarea rows="1" cols="22" th:id="inputTranslation" name="inputTranslation"></textarea>
        <textarea rows="1" cols="22" th:id="language" name="language" value="English"></textarea>
        <input type="submit" th:id="addWord" value="add" />
      </form>
    </div>
    <div class="area">
      <form th:action="@{/delete}" method="post">
        <textarea rows="1" cols="22" th:id="inputWordDelete" name="inputWordDelete"></textarea>
        <textarea rows="1" cols="22" th:id="inputTranslationDelete" name="inputTranslationDelete"></textarea>
        <textarea rows="1" cols="22" th:id="languageDelete" name="languageDelete" value="English"></textarea>
        <input type="submit" th:id="deleteWord" value="delete" />
      </form>
    </div>
  </div>
</div>

Однако вместо этого вы можете использовать свойства height и width CSS.Использование em единиц делает числа довольно близкими к эквивалентам rows и cols соответственно:

textarea {
  height: 1em;
  width: 22em;
  resize: none;
}

<div class="container">
  <div class="container-inner">
    <div class="area">
      <form th:action="@{/}" method="post">
        <textarea th:id="inputWord" name="inputWord"></textarea>
        <textarea th:id="inputTranslation" name="inputTranslation"></textarea>
        <textarea th:id="language" name="language" value="English"></textarea>
        <input type="submit" th:id="addWord" value="add" />
      </form>
    </div>
    <div class="area">
      <form th:action="@{/delete}" method="post">
        <textarea th:id="inputWordDelete" name="inputWordDelete"></textarea>
        <textarea th:id="inputTranslationDelete" name="inputTranslationDelete"></textarea>
        <textarea th:id="languageDelete" name="languageDelete" value="English"></textarea>
        <input type="submit" th:id="deleteWord" value="delete" />
      </form>
    </div>
  </div>
</div>