オンラインでSelect Selection Boxにはさまざまな美化がありますが、私は多くを見つけましたが、良いスタイル効果はありません。そこで、UL LIを使用して作成された選択ボックスに似た効果が見つかりました。ナンセンスについては話しません。最初に写真を追加しますが、効果は次のとおりです。
テストをクリックすると、リストが表示されます。もう一度クリックし、リストを非表示にし、LIを選択し、スパンのコンテンツをLIのコンテンツに置き換えると、JSを使用してスパンの変更を監視してからコードを実行できます。効果は次のとおりです。
HTMLコードは次のとおりです。
<div id = "type"> <span>投資タイプ</span> <ul> <li>先物</li> <li>株式</li> <li> options </li> </ul> </div> <div> <div> <div> <div> <span <span>投資タイプ</span> <ul> <li>トレンド</li> < <li>タイミング</li> </ul> </div>
CSSコードは次のとおりです。
ul li {list-style：none;}。test {position：relative;フロート：左;幅：120px;高さ：40px;パディング左：11px;フォントサイズ：15px; Line-Height：40px;カーソル：ポインター;ボーダー：1pxソリッド＃D2D2D2;ボーダーラジウス：3px;マージン右：20px;アウトライン：なし;}。テスト：{position：absolute;右：13px;トップ：18px;幅：0;高さ：0;コンテンツ：境界線：8px 8px 0 8px;ボーダースタイル：ソリッド;境界線：＃D36969透明; -webkit-transition：変換.25s; -moz-transition：Transform .25s; -ms-transition：変換.25s; -O-Transition：変換.25s; -O-Transition：変換.25s;遷移：変換.25s;}。テスト：{position：absolute;右：15px;トップ：18px;幅：0;高さ：0;コンテンツ： "";境界線：6px 6px 0 6px;ボーダースタイル：ソリッド;境界線：#fff透明; -webkit-transition：すべて.25; -moz-transition：すべて.25s; -ms-transition：すべて.25s; -O-Transition：すべて.25S; -O-Transition：すべて.25S;遷移：すべて.25s;}。test.active：before {-webkit -transform：rotate（180deg）; -moz-transform：Rotate（180deg）; -ms-transform：Rotate（180deg）; -o-transform：Rotate（180deg）;変換：回転（180deg）; } .test.active：after {top：20px; -webkit-transform：Rotate（180deg）; -moz-transform：Rotate（180deg）; -ms-transform：Rotate（180deg）; -o-transform：Rotate（180deg）;変換：回転（180deg）; } .test .dropdown {position：absolute;右：0;左：0;表示：なし;パディング：0;ボーダーラジウス：継承;ボーダー：1pxソリッド＃D2D2D2; Box-Shadow：2PX 2PX 5PX RGBA（0,0,0、.4）;}。test.active .dropdown {display：block;}。test .dropdown：before {position：absolute;右：13px;下：100％;幅：0;高さ：0;コンテンツ： "";境界線：0 8px 8px;ボーダースタイル：ソリッド;境界線：＃d2d2d2透明;}。テスト。ドロップダウン：{position：absolute;右：15px;下：100％;幅：0;高さ：0;コンテンツ： "";境界線：0 6px 6px 6px;ボーダースタイル：ソリッド;境界線：#ffff透明;}。テスト.dropdown li {float：left;幅：129px;フォントサイズ：14px; -webkit-transition：すべての.3sが断念されます。 -moz-transition：すべての.3sが簡単です。 -ms-transition：すべての.3秒の容易さ。 -O-Transition：すべて.3sの断念。遷移：すべての.3Sが断念します。テキストアライグ：center;}。テスト.dropdown li：first-of-type {border-radius：3px 3px 0 0;}。テスト.dropdown li：last-of-type {border-radius：0 0 3px;}。背景：＃c43c3d;}2つの擬似要素について：前と：後、私の以前のブログをチェックすることができます。
JSコードは次のとおりです。
関数ドロップダウン（el）{this.dd = el; this.span = this.dd.children（ 'span'）; this.li = this.dd.find（ 'ul.dropdown li'）; this.val = '';} dropdown.prototype.initevents = function（）{var obj = this; obj.dd.on（ 'click'、function（event）{$（this）.toggleclass（ 'active'）。siblings（）。removeclass（ 'active'）; event.stoppropagation（）;}）; obj.li.on（ 'click'、function（）{var opt = $（this）; obj.val = opt.html（）; if（obj.span.html（）== obj.val）return; obj.span.html（obj.val）; $（document（document）.click（function（）{'。test'）; '。 }）} var test1 = new Dropdown（$（ '＃type'））; var test2 = new Dropdown（$（ '＃dind'））; test1.initevents（）; test2.initevents（）ここでは、コンストラクタープロトタイプの組み合わせモードを使用してドロップダウンオブジェクトが作成されます。コンストラクタープロトタイプの組み合わせモードについて説明します。属性はコンストラクターに記述され、各インスタンスに固有の属性を表し、オブジェクトがコンクリートになります。この方法は、各インスタンスで共有されるメソッドを表すためのコンストラクターの外側に記述されています。
しかし、ここで少し悪い方法は、HTMLのレイアウトが制限されていることです。
素晴らしいトピック共有：JavaScript選択ボックス操作概要jQuery選択ボックス操作の概要
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。