Using style sheets to control scroll bars in IE5.5 browsers

Source: Internet
Author: User
Tags html header window
Control | browser | Style sheet Since the advent of DHTML, Microsoft's enhanced DHTML capabilities have not stopped, with Microsoft's latest Internet Explorer The ie5.5 of 5.5 adds a lot of new style sheet content and modifies the style of the scroll bar, and here's a brief description of the style sheet that involves the browser scroll bar:
1. Overflow settings when content overflows

Overflow-x the settings when the horizontal directional content overflows

Overflow-y The vertical content overflow setting

The values set by the above three properties are visible (default), scroll, hidden, auto.

2. Scrollbar-3d-light-color the color of the solid scroll bar bright Edge

Scrollbar-arrow-color the color of the triangle arrow on the top and bottom buttons

Scrollbar-base-color the basic color of the scroll bar

Scrollbar-dark-shadow-color three-dimensional scroll bar strong shadow Color

Scrollbar-face-color the color of the protruding part of the solid scroll bar

Scrollbar-highlight-color the color of the blank part of the scroll bar

Scrollbar-shadow-color the color of the shadow of a stereo scroll bar

The values set by the above seven properties are all color values, and you can use the various expressions defined by the style sheet.

Using the above style definition content, we can specify the browser window, whether the scroll bar of a multiline text box is displayed or not, the first set of style properties is used to set the Set object to display scroll bars, and the second set of style properties is used to set the color of the scroll bar, and the style attributes that are involved in this article are for IE to support, The second group's style properties are only supported by the ie5.5 version, so please be aware when debugging.

We illustrate the above style properties through several examples:

1. Let the browser window never appear scroll bar

No horizontal scroll bar

<body style= "Overflow-x:hidden" >

No vertical scroll bar

<body style= "Overflow-y:hidden" >

No scroll bar

<body style= "Overflow-x:hidden;overflow-y:hidden" > or <body style= "Overflow:hidden" >

2. Set scroll bar for multiline text box

No horizontal scroll bar

<textarea style= "Overflow-x:hidden" ></textarea>

No vertical scroll bar

<textarea style= "Overflow-y:hidden" ></textarea>

No scroll bar

<textarea style= "Overflow-x:hidden;overflow-y:hidden" ></textarea>

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

3. Set the color of the window scroll bar

Sets the color of the window scroll bar to red <body style= "scrollbar-base-color:red" >

Scrollbar-base-color set the basic color, in general, you only need to set this property to change the scroll bar color.

Add a little special effect:

<body style= "Scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon" >

4. When setting other elements, basically, you'd better define a class in the stylesheet file so you can reuse it.

. Coolscrollbar

{

Scrollbar-arrow-color:yellow;

Scrollbar-base-color:lightsalmon;

}

Add the above statement to the style sheet file or the <style></style> in the HTML header, and then use the

<textarea class= "Coolscrollbar" ></textarea>

Move quickly and make your home page cool right now.

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.