devtest

jquery＋CSSを使ったプルダウンメニューのデザイン設計についてです。ネットからサンプルコードをとってきて半オリジナルのデザインを作ろうと思っています。しかし、そのデザインはoptgroup要素がない前提で作られているもので、私が想定しているoptgroupありのプルダウンデザインではありませんでした。自分でoptgroupの要素を取ってきてCSSで装飾させるプログラムを書いたのですがどうもうまくいかず。2時間以上試行錯誤している状態です。下記プルダウンのlabel="group"の中にtestを入れさせるようなつくりにするためにはjavascriptとCSSをどのように構築知ればよろしいか教えていただければと思っております。 WEB初心者で至らぬところもあるとは思いますがよろしくお願いいたします。 ```html {% load static %} devtest

``` ```css .center { position: absolute; display: inline-block; top: 50%; left: 50%; transform: translate(-50%, -50%); } /** Custom Select **/ .custom-select-wrapper { position: relative; display: inline-block; user-select: none; } .custom-select-wrapper select { display: none; } .custom-select { position: relative; display: inline-block; } .custom-select-trigger { position: relative; display: block; text-align: center; line-height: 80px; background-color: rgba( 255, 255, 255, 0.3 ); font-size: 25px; font-weight: 100; color: #000; width: 380px; height: 80px; border-radius: 20px; font-family: 'Sawarabi Gothic', sans-serif; box-shadow: -2px -2px 10px black inset; } .custom-select.opened .custom-select-trigger:after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); } .custom-options { position: absolute; display: block; top: 100%; left: 0; right: 0; min-width: 100%; margin: 15px 0; border: 1px solid #b5b5b5; border-radius: 4px; box-sizing: border-box; box-shadow: 0 2px 1px rgba(0,0,0,.07); background: #fff; transition: all .4s ease-in-out; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-15px); } .custom-select.opened .custom-options { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); } .custom-options:before { /*プルダウン部上部の三角形*/ position: absolute; display: block; content: ''; bottom: 100%; right: 25px; width: 7px; height: 7px; margin-bottom: -4px; border-top: 1px solid #b5b5b5; border-left: 1px solid #b5b5b5; background: #fff; transform: rotate(45deg); transition: all .4s ease-in-out; } .option-hover:before { /*プルダウン部上部の三角形の色*/ background: #f9f9f9; } .custom-option { /*プルダウン部リスト内部*/ position: relative; display: block; padding: 0 22px; border-bottom: 1px solid #b5b5b5; font-size: 18px; font-weight: 600; color: #4d4d4d; line-height: 47px; cursor: pointer; transition: all .4s ease-in-out; } .custom-option:first-of-type { border-radius: 4px 4px 0 0; } .custom-option:last-of-type { border-bottom: 0; border-radius: 0 0 4px 4px; } .custom-option:hover, .custom-option.selection { background: #ebebeb; } ```

	@@ -1 +1 @@
1	- ~~jqueryでデザインされた~~プルダウンメニューにoptgroupを対応させたい。
1	+ プルダウンメニューにoptgroupを対応させたい。

質問編集履歴