ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLでドロップダウンボックスを非表示にする方法

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

青灯夜游オリジナル: 2021-12-13 17:21:439348ブラウズ

方法: 1. 構文 "

このチュートリアルの動作環境: 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でドロップダウンボックスを非表示にする方法

推奨チュートリアル: 「html ビデオチュートリアル」

以上がHTMLでドロップダウンボックスを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css3 html select display

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLでボタンの枠線を消す方法次の記事：HTMLでボタンの枠線を消す方法

続きを見る