I'm currently working on customizing my HTML page and I want to ensure that all text inputs are consistent in size.
I attempted to use the text-area selector in CSS, but it didn't seem to work correctly in Opera. The resize handle disappeared in Mozilla Firefox, and even though I specified the rows and columns for the text-area, it didn't display as expected.
The following code snippet:
<textarea style="resize:none" rows="1" cols="22" th:id="inputWord" name="inputWord"></textarea>
does the job, but I'm puzzled as to why CSS isn't affecting it 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>