How to make a textarea adjustable after resize: none has been set?
For example, I have a textarea that has a value set to resize:none in CSS, however I want to leave the default value by putting an inline snippet.
.my_textarea{
border: 2px solid pink;
resize: none;
width: 300px;
height: 100px;
}<textarea class="my_textarea"></textarea>What is the default value for the "resize" attribute in a textarea?
The default value is: auto .
resize: auto;
How do we know this? We can see the user agent stylesheet in the browser.
textarea {
-webkit-appearance: textarea;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
flex-direction: column;
resize: auto; /* Aqui */
cursor: auto;
white-space: pre-wrap;
word-wrap: break-word;
border-width: 1px;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 2px;
}
Another way to do this is to use the value both .
See:
.my_textarea{
border: 2px solid pink;
resize: none;
width: 300px;
height: 100px;
}<textarea class="my_textarea"></textarea>
<textarea class="my_textarea" style="resize: both"></textarea> Remembering that this is not the default value but that it behaves in the way that textarea is usually set by default.
According to W3School :
both : The user can adjust both the height and width of the element
According to MDN :
Gecko 2.0 introduced support for resizable textareas. This is controlled by the resize CSS property. Resizing of textareas enabled by default ...
Translating stays:
Gecko 2.0 introduced support for scalable textareas. That is controlled by the resizing CSS property. Resizing textareas is enabled by default ...
Which according to discovery of @DiegoSouza, the default value for enabled is auto .