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:

No vertical scroll bar

Copy code

The code is as follows:

No scroll bars

Copy code

The code is as follows:

Copy code

The code is as follows:

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:

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

HTML tag overflow processing application

Summary of MySQL log related knowledge

Summary of pitfalls in importing ova files into vmware

Implementation of modifying configuration files in Docker container

Javascript implements simple navigation bar

Redission-tomcat quickly implements deployment from single machine to multi-machine deployment

Use JS to zoom in and out when you put the mouse on the image

Nginx server https configuration method example

Use CSS to switch between dark mode and bright mode

URL Rewrite Module 2.1 URL Rewrite Module Rule Writing

Analysis of the Principle of MySQL Index Length Limit

Recommend

URL Rewrite Module 2.1 URL Rewrite Module Rule Writing

Detailed explanation of Vue parent-child component value transfer and one-way data flow issues

A brief discussion on the execution details of Mysql multi-table join query

Detailed explanation of the principle and example of the new operator in JavaScript

A brief discussion on spaces and blank lines in HTML code

Introduction to Linux system swap space

How to use Docker container to access host network

Let's talk about the difference between MyISAM and InnoDB

Tips for Mixing OR and AND in SQL Statements

The reason why MySQL uses B+ tree as its underlying data structure

How to use CSS attribute value regular matching selector (tips)

MySQL solution for creating horizontal histogram

MySQL tutorial thoroughly understands stored procedures

Detailed explanation of how to easily switch CSS themes

An example of the execution order between the href jump and onclick of the html hyperlink a tag