ホームページ >ウェブフロントエンド >CSSチュートリアル >ドロップダウン リスト内に複数選択用のチェックボックスを作成するにはどうすればよいですか?
ドロップダウン リスト内に複数選択用のチェックボックスを作成するにはどうすればよいですか?
- Susan Sarandonオリジナル
- 2024-11-30 03:45:11341ブラウズ
ドロップダウン リスト内にチェックボックスを作成する
複数選択ドロップダウン リストを作成するときの目標は、ユーザーがドロップダウン リストから複数のオプションを選択できるようにすることです。ドロップダウンメニュー。 を追加するなどの単純なアプローチを使用します。
これに対処し、複数のオプションを選択できるようにするには、より洗練されたアプローチが必要です。以下は、ドロップダウン内の各オプションのチェックボックスを作成するソリューションです。
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
};
<div>
このアプローチでは、CSS と JavaScript を利用して、ドロップダウン内に表示される機能的なチェックリストを作成します。 「果物の選択」アンカーをクリックすると、オプションのリストを表示または非表示にし、チェックボックスを使用して複数の果物を選択できます。
以上がドロップダウン リスト内に複数選択用のチェックボックスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。