CSS overflow hides the scrollbar of the textarea text field

 The original textarea text input field is preset to, when the text content exceeds the display block, the scrollbar will automatically appear. If you want to hide the scrollbar, you can use the CSS overflow property. The function of this property is to control when the content exceeds the block. The display mode when the situation occurs, and the x-axis or y-axis direction can be set individually, or it can be set at once.

Scrollbar example syntax for hiding textarea text field

<textarea style="width:200px;height:100px;border:2px #ccc solid;overflow:hidden;">
Welcome to Wibibi.have a good day.This is scrollbar hidden test.You can see this textarea have no scrollbar both in x direction and y direction.
</textarea>

We use CSS style settings to set the width and height of the HTML textarea to 200 pixels and 100 pixels, respectively, and use the CSS overflow property to control the string of English text content. If it exceeds the range of the textarea, the scrollbar is hidden.

Example showing results

From the example results, we can see that no scrollbar is displayed on either the x-axis or the y-axis. In the example syntax, we directly use overflow:hidden, so that the horizontal and vertical scrollbar will be hidden at the same time. To set the horizontal or vertical scrollbar to hide, you can use the two writing methods below.

• Set the way to hide the scrollbar in the horizontal direction: overflow-x:hidden;
• Set the way to hide the scrollbar in the vertical direction: overflow-y:hidden;

As long as you use one of the above two grammars in the CSS grammar, you can set a specific direction separately. If you want to hide both sides at a time, just use overflow: hidden. You don’t need to write both of them. Of course, no If it is troublesome, it is fine to write both.