My textarea in HTML is still resizeable despite adding 'resize:none' in CSS file in Opera browser

Question

I am trying to stylize my HTML page, and want to keep text inputs in the same dimensions.

I have already tried to specify text-area selector in CSS but it did not work in Opera. The resize mark disappeared in Mozilla firefox, but unfortunately the size of text-area was not as I desired.

The

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

works, but I do not know why CSS has no impact here.

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>

score 0 · Answer 1 · answered Feb 10 '19 at 14:59

rows and cols are attributes for <textarea>, not CSS properties:

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>

However, you can use CSS’s height and width properties instead. Using em units makes the numbers pretty close to being equivalent to rows and cols respectively:

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>

My bad about CSS, but still, I can change the size of textareas in the Opera. — Tchorson, Feb 10 '19 at 15:03
Hmm, it [should work](https://caniuse.com/#feat=css-resize). Are there any other styles that could be overriding your `resize: none`? — MTCoster, Feb 10 '19 at 15:08
No, I use resize attribute only in that area ,I have used width, margin and display attributes but I am not aware whether they can affect on resize or not — Tchorson, Feb 10 '19 at 15:15

My textarea in HTML is still resizeable despite adding 'resize:none' in CSS file in Opera browser

1 Answers1