Le style de sélection par défaut est souvent laid. Afin de garantir le style uniforme de la page, SELECT doit être embellir. Bien qu'il existe de nombreux plug-ins embellis, la recherche de beaucoup, c'est vraiment un mal de tête d'introduire de longs fichiers CSS et fichiers JS. En fait, le principe de mise en œuvre de SELECT est très simple, c'est un processus de clic pour changer les valeurs d'affichage, de masquer et de passer. Je l'ai simulé avec jQuery et écrit le style que vous voulez, sans limiter le nombre.
Effets simples:
HTML:
<v> <font> ours 3 </li> </ul> </div>
CSS:
ul {marge: 0; rembourrage: 0; Style de liste: aucun;}. select_box {width: 200px; hauteur: 36px; Border: 1px solide # 3CF; Position: relative; flottant: à gauche; margin-droite: 50px;}. select_box span {affiche: bloc en ligne; Largeur: 200px; hauteur: 36px; Courvesor: pointeur; Text-indent: 10px;}. select_box .span_aa {couleur: # c36;}. select_box ul {width: 200px; Position: absolue; En haut: 36px; gauche: -1px; Border: 1px solide # 3CF; Affichage: aucun; Background: #fff;}. select_box li {cursor: pointeur; hauteur de ligne: 36px; Text-indent: 10px;}. select_box li: hover {background: # 39f; Couleur: #fff;}. SELECT_BOX FONT {position: absolue; À droite: 10px; taille de police: 26px; Font-Family: "Microsoft Yahei"; Couleur: # 3CF; Transformer: Rotation (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"). show (); e.stoppropagation ();}); s_select.click (function () {var s_text = $ (this) .html (); var s_title_2 = $ (this) .parent ('ul'). prev ("span"); s_title_2.html (s_text) .reMoveClass ("Span_aa"); $ (this) .parent ('ul'). hide ();); $ (document) .click (function () {s_title.removeclass ("span_aa"); $ (". select_box ul"). hide ();});});Téléchargement du code source: JS Select Drop-down Box Embeltification Download
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer sur le résumé de l'effet de boîte déroulant JQuery et le résumé de l'effet de la boîte déroulante JavaScript pour apprendre.
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.