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

Automatically build and deploy using Docker+Jenkins

This article introduces Docker+Jenkins automatic ...

Initial settings after installing Ubuntu 16 in the development environment

The office needs Ubuntu system as the Linux devel...

MySQL quick recovery solution based on time point

The reason for writing such an article is that on...

Detailed explanation of the principle of distributed locks and three implementation methods

Currently, almost all large websites and applicat...

Detailed explanation of the use of HTML header tags

HTML consists of two parts: head and body ** The ...

Use Angular CDK to implement a Service pop-up Toast component function

Table of contents 1. Environmental Installation 2...

An article teaches you how to implement a recipe system with React

Table of contents 1. Recipe Collection 1.1 Projec...

Basic usage of find_in_set function in mysql

Preface This is a new function I came across rece...

Docker data storage tmpfs mounts detailed explanation

Before reading this article, I hope you have a ba...

Ideas and methods for realizing real-time log reporting with Nginx pure configuration

Table of contents Preface Implementation ideas Im...

How to implement a multi-terminal bridging platform based on websocket in JS

Table of contents 1. What to debug 2. Features of...

Detailed explanation of how to customize the style of CSS scroll bars

This article introduces the CSS scrollbar selecto...

WeChat applet + mqtt, esp8266 temperature and humidity reading implementation method

First, the principle of esp8266 publishes message...

Deeply understand how nginx achieves high performance and scalability

The overall architecture of NGINX is characterize...

How to use worker_threads to create new threads in nodejs

Introduction As mentioned in the previous article...