找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 查看内容

html怎么隐藏下拉框

作者:模板之家 2021-12-13 18:09 219人关注

方法:1、给select元素设置hidden属性,语法“select hidden=hidden”;2、给select元素添加“display:none”样式;3、给select元素添加“visibility:hidden”样式。

方法:1、给select元素设置hidden属性,语法“<select hidden="hidden">”;2、给select元素添加“display:none”样式;3、给select元素添加“visibility:hidden”样式。

本教程操作环境: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>

1.png

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>

2.png

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>

3.png


路过

雷人

握手

鲜花

鸡蛋
来自: 网络收集

全部回复(0)