HTML tag overflow processing application

HTML tag overflow processing application

Use CSS to modify scroll bars
1. Overflow settings when the content overflows

overflow-x setting for horizontal content overflow
overflow-y settings for vertical content overflow The above three properties are set to visible (default value), scroll, hidden, and auto.

2. scrollbar-3d-light-colorThe color of the bright edge of the three-dimensional scroll bar
scrollbar-arrow-colorThe color of the triangle arrow on the up and down buttons
scrollbar-base-color The basic color of the scrollbar
scrollbar-dark-shadow-color The color of the strong shadow of the three-dimensional scroll bar
scrollbar-face-color The color of the protruding part of the three-dimensional scroll bar
scrollbar-highlight-color The color of the blank part of the scrollbar
scrollbar-shadow-color The color of the three-dimensional scroll bar shadow The values ​​set by the above seven properties are all color values, and can be expressed in various ways defined in the style sheet.

Using the above style definition content, we can specify whether to display and color style of scroll bars in browser windows and multi-line text boxes. The first group of style attributes is used to set whether the set object displays scroll bars, and the second group of style attributes is used to set the color of the scroll bar. It should be noted that the style attributes involved in this article are only supported by IE, and the second group of style attributes is only supported by IE5.5, so please pay attention when debugging.

We explain the above style attributes through several examples:

1. Make the browser window never have scroll bars or horizontal scroll bars
<body style="overflow-x:hidden">
No vertical scroll bar
<body style="overflow-y:hidden">
No scroll bars
<body style="overflow-x:hidden;overflow-y:hidden"> or <body style="overflow:hidden">

2. Set the scroll bar of the multi-line text box to have no horizontal scroll bar

Copy code
The code is as follows:
<textarea style="overflow-x:hidden"> </textarea>

No vertical scroll bar

Copy code
The code is as follows:
<textarea style="overflow-y:hidden"> </textarea>

No scroll bars

Copy code
The code is as follows:
<textarea style="overflow-x:hidden;overflow-y:hidden"> </textarea>

or
Copy code
The code is as follows:
<textarea style="overflow:hidden"> </textarea>


3. Set the color of the window scroll bar Set the color of the window scroll bar to red <body style="scrollbar-base-color:red">
scrollbar-base-color sets the basic color. Generally, you only need to set this one property to change the scroll bar color.
Add a little special effect:

Copy code
The code is as follows:
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">


4. When setting other elements, it is basically the same. It is best to define a class in the style sheet file so that you can reuse it.


Copy code
The code is as follows:

.coolscrollbar
{
scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon;
}

Add the above statement to the style sheet file or the <style> </style> of the HTML header, and then use
<textarea class="coolscrollbar"> </textarea>

<<:  How to install docker under centos and remotely publish docker in springboot

>>:  Web form creation skills

Recommend

How to build a redis cluster using docker

Table of contents 1. Create a redis docker base i...

Detailed installation tutorial of Mysql5.7.19 under Centos7

1. Download Download mysql-5.7.19-linux-glibc2.12...

Service management of source package installation under Linux

Table of contents 1. Startup management of source...

How to build and deploy Node project with Docker

Table of contents What is Docker Client-side Dock...

Implementation steps for building a local web server on Centos8

1 Overview System centos8, use httpd to build a l...

How to build DockerHub yourself

The Docker Hub we used earlier is provided by Doc...

How to set up PostgreSQL startup on Ubuntu 16.04

Since PostgreSQL is compiled and installed, you n...

Detailed explanation of docker entrypoint file

When writing a Dockerfile, include an entrypoint ...

What is JavaScript anti-shake and throttling

Table of contents 1. Function debounce 1. What is...

How to install MySQL for beginners (proven effective)

1. Software Download MySQL download and installat...

How to dynamically add ports to Docker without rebuilding the image

Sometimes you may need to modify or add exposed p...

Detailed explanation of the performance monitoring ideas of specified processes in Linux system based on Python

There are many tools, components and programs for...

Linux solves the problem that Deepin cannot start Google Chrome browser as root user

To solve the problem that Deepin cannot start Goo...

Detailed explanation of the pitfalls of DTS caused by the timestamp and datetime time zone issues in MySQL

Table of contents How to represent the current ti...

Vue3.0 project construction and usage process

Table of contents 1. Project construction 2: Dire...