HTMLでドロップダウンボックスを非表示にする方法-htmlチュートリアル-php.cn

HTMLでドロップダウンボックスを非表示にする方法

青灯夜游

リリース： 2021-12-13 17:21:43

オリジナル

9353 人が閲覧しました

方法: 1. 構文 "

HTMLでドロップダウンボックスを非表示にする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

html ドロップダウンボックスを非表示にするメソッド:

HTML では、ドロップダウンボックスは select タグを参照します。 ; したがって、ドロップダウンボックスは非表示になり、選択タグが非表示になります。以下に 3 つの方法を紹介します:

1. ドロップダウンボックス要素 select

<!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>

ログイン後にコピー

HTMLでドロップダウンボックスを非表示にする方法

に隠し属性を設定します。 #2. 「display: none;」スタイルをドロップダウンボックス要素 select

<!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>

ログイン後にコピー

HTMLでドロップダウンボックスを非表示にする方法

# に追加します。3. 「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でドロップダウンボックスを非表示にする方法