In HTML, remove the TEXTAREA right scroll bar and drag the lower right corner

Source: Internet
Author: User
Tags html tags

We often get rid of the scroll bars of HTML pages, usually as follows

Drop left and right scroll bar, keep up and down scroll bar: <body style= "Overflow-x:hidden;overflow-y:auto;" >

If the page header has: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

You need to remove the code, or change it to: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >

It turns out that you can't use it in the Textara, looking for a CSS

body{
Scrollbar-3dlight-color: #D4D0C8; /*-left-*/
Scrollbar-highlight-color: #fff; /*-left two-*/
Scrollbar-face-color: #E4E4E4; /*-face-*/
Scrollbar-arrow-color: #666; /*-Arrow-*/
Scrollbar-shadow-color: #808080; /*-right Two-*/
Scrollbar-darkshadow-color: #D7DCE0; /*-Right One-*/
Scrollbar-base-color: #D7DCE0; /*-Base Color-*/
scrollbar-track-color:#;/*-Slide-*/
}

Test found also ineffective, then how to remove the textarea right scroll bar and lower right corner drag

When working with a textarea label in a form, you have the following areas to note:

1, remove the right scroll bar:

<textarea style= "Overflow:hidden; "> </textarea>

2, remove the lower right corner of the drag tag:

<textarea style= "Resize:none;" > </textarea>

Explanation: HTML tags textarea in most browsers specify rows and columns (COLS) properties, you can define textarea size, the size will not change, but the better way is to use the CSS height and width properties, but chrome, Safari and Firefox render different effects, you can drag the lower right corner icon to change the size. But dragging too much will affect the layout of the page, making the page unattractive. You can disable drag by adding the following two styles, fixed size:


add: Hide the textarea scroll bar

To set whether the scroll bar for the TextArea text field is turned on, using the Style.overflow-x property to control it. For example, if you want to hide the horizontal scroll bar for the Text field, add the Overflow-x property control to the Style property, as follows:
<textarea id=txtcomments style= "Overflow-x:hidden" >< /textarea>
Accordingly, to hide the portrait scroll bar:
<textarea id=txtcomments style= "Overflow-y:hidden" ></textarea>
If you use code control, you might need to implement the following code:
document.all ("txtcomments"). style.overflowx= "hidden";
Overflow-x, The Overflow-y value is: visible (default value), Hidden,auto,scroll.
Visible: Scroll bars are never displayed, and the size of the text area automatically grows to display the entire contents, depending on the content.
Scroll: Scroll bars are always displayed, regardless of how much content is in the text area.
Hidden: Scroll bars are never displayed and objects beyond the level are not displayed.
Auto: If the content is displayed in the text area, the scroll bar does not appear, and when the content is not fully displayed, the content is truncated and the scroll bar displays all the content.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.