選択のデフォルトスタイルはしばしば醜いです。ページの均一なスタイルを確保するには、選択する必要があります。多くの美しいプラグインがたくさんありますが、多くを検索していますが、長いCSSファイルとJSファイルを導入するのは本当に頭痛の種です。実際、Selectの実装の原則は非常に単純であり、表示、非表示、および渡される値を切り替えるためにクリックするプロセスです。私はそれをjQueryでシミュレートし、数字を制限することなく、あなたが望むどんなスタイルでも書きます。
単純な効果：
HTML：
<div> <font> </font> <span>オプション1 </span> <ul> <li>オプション1 </li> <li>オプション2 </li> <li>オプション2 </li> <li>オプション3 </li> </ul> </div> <div> <font>› </font> <スパン>オプション1 </span < 3 </li> </ul> </div>
CSS：
ul {マージン：0;パディング：0;リストスタイル：なし;}。select_box {width：200px;高さ：36px;ボーダー：1pxソリッド＃3cf;位置：相対;フロート：左;マージン右：50px;}。select_box span {display：inline-block;幅：200px;高さ：36px;曲線：ポインター; Text-Indent：10px;}。select_box .span_aa {color：＃c36;}。select_box ul {width：200px;位置：絶対;トップ：36px;左：-1px;ボーダー：1pxソリッド＃3cf;表示：なし;背景：#fff;}。select_box li {cursor：pointer;ラインハイト：36px;テキストインデント：10px;}。select_box li：hover {background：＃39f;色：#fff;}。select_box font {position：absolute;右：10px;フォントサイズ：26px;フォントファミリー：「Microsoft Yahei」;色：＃3cf;変換：回転（90DEG）;}JS：
$（function（）{var s_title = $（ "。select_box span"）; var s_select = $（ "。select_box li"）; s_title.click（function（e）{$（this）.addclass（ "span_aa"）; $（this）next（ "ul"）。 S_SELECT.CLICK（function（）{var s_text = $（this）.html（）; var s_title_2 = $（this）.parent（ 'ul'）。prev（ "span"）; s_title_2.html（s_text）。 $（document）.click（function（）{s_title.removeclass（ "span_aa"）; $（ "。select_box ul"）。hide（）;}）;ソースコードのダウンロード：JS選択ボックスの美化を選択します
それでも詳細に学習したい場合は、jQueryドロップダウンボックスエフェクトの概要とJavaScriptドロップダウンボックスエフェクトサマリーをクリックして学習できます。
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。