Home >Web Front-end >HTML Tutorial >How to implement html without displaying the arrow of the drop-down list
How to implement html without displaying the arrow of the drop-down list
- 醉折花枝作酒筹Original
- 2021-04-22 11:22:013931browse
How to not display the drop-down list arrow: first set the width of the select element and the div element, where the width of the div element is 20px greater than the width of the select element; then set "overflow:hidden" in the select element to achieve this Effect.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
html select drop-down arrow hide
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.width5 {
width: 122px;
}
.width7
{
width: 142px;
}
/*设置Select样式*/
.SelectList
{
height: 32px;
line-height: 32px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="DivSelect width5">
<select class="SelectList width7">
<option>双铜纸</option>
<option>双胶纸</option>
</select>
</div>
</body>
</html>This is the effect in normal state, with arrow:
We only need Set overflow: hidden; in the outer div to hide the arrow.
.DivSelect
{
overflow: hidden; /* 隐藏了小三角，宽度为比select宽度少20px */
}The effect is as shown:
Due to this situation, some parts have no borders, so when hiding the arrow, for the sake of beauty, it will be set to borderless .
Recommended learning: html video tutorial
The above is the detailed content of How to implement html without displaying the arrow of the drop-down list. For more information, please follow other related articles on the PHP Chinese website!