The way to hide the drop-down scroll bar in css is to add the overflow attribute, such as [overflow:hidden]. At this time, the drop-down scroll bar will be completely hidden. It should be noted that the overflow attribute will only work on block elements with a specified height.
The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.
In CSS, we can use the overflow attribute to control the addition of scroll bars in the corresponding element range when the content overflows the element box.
If we need to hide the scroll bar and display the scroll bar when the content overflows, we only need to set the overflow: auto style; if we want to completely hide the scroll bar, we only need to set overflow: hidden, but this way will cause the element content to be non-scrollable.
Note: The overflow attribute only works on block elements with a specified height.
For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>
<div id="overflowTest">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>
</body>
</html>Related video tutorial: css video tutorial
The above is the detailed content of How to hide drop-down scroll bar in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
