HTML中怎样隐藏下拉框？教你三种方法

HTML中怎样隐藏下拉框？在网页中，下拉框还是比较常见的，尤其是一些信息填写页面，这篇就主要给大家讲讲HTML中隐藏下拉框的三种方法，下文有详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

html隐藏下拉框的方法：

在html中，下拉框指的是select标签；因此隐藏下拉框，就是隐藏elect标签。下面介绍3种方法：

1、给下拉框元素select设置hidden属性

!DOCTYPE html>
    
html>
    
	head>
    
		meta charset="utf-8">
    
	/head>
    
	body>
    
		下拉框：
		select hidden="hidden">
    
		  option>
    Volvo/option>
    
		  option>
    Saab/option>
    
		  option>
    Mercedes/option>
    
		  option>
    Audi/option>
    
		/select>
    
	/body>
    
/html>
    

2、给下拉框元素select添加“display: none; ”样式

!DOCTYPE html>
    
html>
    
	head>
    
		meta charset="utf-8">
    
	/head>
    
	body>
    
		下拉框：
		select style="display: none;
    ">
    
		  option>
    Volvo/option>
    
		  option>
    Saab/option>
    
		  option>
    Mercedes/option>
    
		  option>
    Audi/option>
    
		/select>
    
	/body>
    
/html>
    

3、给下拉框元素select添加“visibility:hidden”样式。

!DOCTYPE html>
    
html>
    
	head>
    
		meta charset="utf-8">
    
	/head>
    
	body>
    
		下拉框：
		select style="visibility: hidden;
    ">
    
		  option>
    Volvo/option>
    
		  option>
    Saab/option>
    
		  option>
    Mercedes/option>
    
		  option>
    Audi/option>
    
		/select>
    
	/body>
    
/html>
    

以上就是HTML中隐藏下拉框的介绍，上述三种方法和示例具有一定的参考价值，有需要的朋友可以了解看看，希望对大家学习HTML有帮助，想要了解更多可以继续浏览网络其他相关的文章。

文本转载自PHP中文网