1. 前言
在html页面中，下拉框是一个常见的元素，但在某些情况下需要隐藏下拉框，例如当我们需要自定义下拉框样式或者禁止用户选择某些选项时。在本文中，我们将探讨如何使用html和css来隐藏下拉框。
2. 下拉框概述
下拉框，也称为选择框、下拉列表、下拉菜单，在html中是一种常见的表单元素，通常用于让用户从一组预定义的选项中选择一个值。下拉框的html标签是<select>，其中每个选项由<option>标签表示。
以下是一个简单的下拉框示例：
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
上述代码会在页面上显示一个下拉框，其中包括三个选项：选项1、选项2和选项3。
3. 隐藏下拉框
3.1 隐藏选项
在某些情况下，我们并不需要将所有选项都显示出来，而是只显示部分选项或者默认值。这可以通过设置<select>标签的size属性来实现。size的值表示下拉框默认显示多少个选项。如果size的值大于选项总数，则会显示所有选项。如果size的值小于选项总数，则会出现下拉框滚动条。
以下是一个例子，size为2，表示默认显示2个选项：
<select size="2">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
上述代码会在页面上显示一个下拉框，其中包括三个选项，但只会显示选项1和选项2，因为size为2。
3.2 隐藏整个下拉框
除了隐藏选项之外，有时我们需要完全隐藏下拉框。这可以通过css来实现。
最简单的方法是将<select>标签的display属性设置为none，例如：
<style>
select {
display: none;
}
</style>
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
上述代码将隐藏整个下拉框，使其不在页面上显示。
4. 自定义下拉框
除了隐藏下拉框之外，有时我们还需要自定义下拉框的样式。
实现自定义下拉框的方法有很多种，其中一种常用的方法是使用css和js来实现。具体步骤如下：
4.1 隐藏原来的下拉框
首先需要将原来的下拉框隐藏起来，可以通过css的display:none属性实现：
<style>
select {
display: none;
}
</style>
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
4.2 创建自定义下拉框
接下来需要创建一个自定义的下拉框，可以使用div和ul标签来实现：
<style>
.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #eee;
}
.select-selected:after {
content: "";
position: absolute;
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #000 transparent transparent transparent;
}
.select-items {
position: absolute;
z-index: 99;
top: 100%;
left: 0;
right: 0;
max-height: 200px;
overflow-y: scroll;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
}
.select-items div {
padding: 10px;
cursor: pointer;
background-color: #eee;
}
.select-items div:hover {
background-color: #ccc;
}
</style>
<div class="custom-select">
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<div class="select-selected">请选择一个选项</div>
<div class="select-items">
<div>选项1</div>
<div>选项2</div>
<div>选项3</div>
</div>
</div>
上述代码会在页面上显示一个自定义的下拉框，其中包括一个原来的隐藏下拉框和一个自定义的下拉框。自定义下拉框包括一个选择显示框和一个选项列表。当用户点击选择显示框时，将显示选项列表。当用户选择一个选项后，选项将出现在选择显示框中。
4.3 绑定事件
最后需要使用js来绑定事件，使得自定义下拉框能够正常工作。具体步骤如下：
当用户点击选择显示框时，显示选项列表
当用户选择一个选项后，将选项的值填充到原来的隐藏下拉框中，并将选项显示在选择显示框中
当用户点击其他地方时，关闭选项列表
以下是完整的代码：
<style>
.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #eee;
}
.select-selected:after {
content: "";
position: absolute;
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #000 transparent transparent transparent;
}
.select-items {
position: absolute;
z-index: 99;
top: 100%;
left: 0;
right: 0;
max-height: 200px;
overflow-y: scroll;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
}
.select-items div {
padding: 10px;
cursor: pointer;
background-color: #eee;
}
.select-items div:hover {
background-color: #ccc;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var x, i, j, selElmnt, a, b, c;
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < selElmnt.length; j++) {
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
document.addEventListener("click", closeAllSelect);
});
</script>
上述代码使用js实现了自定义下拉框的功能，当用户点击选择显示框时，将显示选项列表。当用户选择一个选项后，将选项的值填充到原来的隐藏下拉框中，并将选项显示在选择显示框中。当用户点击其他地方时，将关闭选项列表。通过自定义样式和js实现，我们可以创建出更加美观和实用的下拉框。
5. 总结
在html页面中，下拉框是一个常见的元素。本文介绍了如何隐藏下拉框和如何自定义下拉框。隐藏下拉框可以通过设置css的display属性实现，而自定义下拉框可以通过css和js来实现。通过自定义样式和js实现，我们可以创建出更加美观和实用的下拉框。