Es gibt verschiedene Verschönerungen des Select -Auswahlfelds online, und ich habe viel gefunden, aber es gibt keinen guten Stileffekt. Daher fand ich einen Effekt, ähnlich dem mit UL Li hergestellten Auswahlfeld. Ich werde keinen Unsinn reden. Ich werde zuerst das Bild hinzufügen, und der Effekt ist wie folgt:
Klicken Sie auf einen Test und die Liste wird angezeigt. Klicken Sie erneut, ausblenden Sie die Liste, wählen Sie ein LI aus und ersetzen Sie den Inhalt im Spannweite durch den Inhalt von Li, und Sie können JS verwenden, um die Änderungen in der Spanne zu überwachen und dann Ihren Code auszuführen. Die Effekte sind wie folgt:
Der HTML -Code lautet wie folgt:
<div id="type"> <span>Investment types</span> <ul> <li>Futures</li> <li>Stocks</li> <li>Options</li> </ul></div><div id="kind"> <span>Investment types</span> <ul> <li>Trends</li> <li>Volatility</li> <li>Arbitrage</li> <li>Stock selection</li> <li> Timing </li> </ul> </div>
Der CSS -Code lautet wie folgt:
ul li {Listenstil: Keine;}. Test {Position: Relativ; float: links; Breite: 120px; Höhe: 40px; Padding-Links: 11px; Schriftgröße: 15px; Zeilenhöhe: 40px; Cursor: Zeiger; Grenze: 1PX Solid #D2D2D2; Border-Radius: 3px; Rand-Rechts: 20px; Umriss: Keine;}. Test: Vor {Position: absolut; Rechts: 13px; Top: 18px; Breite: 0; Höhe: 0; Inhalt: Grenzbreite: 8px 8px 0 8px; Grenzstil: solide; Grenzfarbe: #D36969 transparent; -Webkit-Übergang: 25s transformieren; -moz-transition: transformieren .25s; -MS-Übergang: 25s transformieren; -O-Übergang: 25s transformieren; -O-Übergang: 25s transformieren; Übergang: Transformation .25s;}. Test: Nach {Position: absolut; Rechts: 15px; Top: 18px; Breite: 0; Höhe: 0; Inhalt: ""; Randbreite: 6px 6px 0 6px; Grenzstil: solide; Grenzfarbe: #fff transparent; -Webkit-Übergang: alle .25s; -moz-Übergang: alle .25s; -ms-Übergang: alle .25s; -O-Übergang: alle .25s; -O-Übergang: alle .25s; Übergang: alle .25s;}. test.active: vor {-webkit -transform: rotate (180 °); -moz-transform: drehen (180 °); -MS-Transformation: Drehen (180 Grad); -O-Transformation: Drehen (180 Grad); Transformation: Drehen (180 Grad); } .Test.Active: After {top: 20px; -Webkit-transform: rotate (180 °); -moz-transform: drehen (180 °); -MS-Transformation: Drehen (180 Grad); -O-Transformation: Drehen (180 Grad); Transformation: Drehen (180 Grad); } .Test .dropdown {Position: absolut; Rechts: 0; links: 0; Anzeige: Keine; Polsterung: 0; Grenzradius: Erbe; Grenze: 1PX Solid #D2D2D2; Box-Shadow: 2px 2px 5px RGBA (0,0,0, .4);}. test.active .dropdown {display: block;}. test .dropdown: vor {Position: absolut; Rechts: 13px; unten: 100%; Breite: 0; Höhe: 0; Inhalt: ""; Randbreit: 0 8px 8px; Grenzstil: solide; Grenzfarbe: #D2D2D2 transparent;}. Test .dropdown: After {Position: Absolut; Rechts: 15px; unten: 100%; Breite: 0; Höhe: 0; Inhalt: ""; Randbreit: 0 6px 6px 6px; Grenzstil: solide; Border-Color: #ffff transparent;}. test .dropdown li {float: links; Breite: 129px; Schriftgröße: 14px; -Webkit-Übergang: Alle. -moz-Übergang: Alle .3s Easy-Out; -Ms-Übergang: Alle .3s-Leichtigkeiten; -O-Übergang: Alle .3s Leichtigkeit; Übergang: Alle .3s-Entlastung; Text-Align: Mitte;}. Test .Dropdown li: Erst von Typ {Border-Radius: 3px 3px 0 0;}. TEST .DROPDOWN LI: LETTER-OFT-Typ {Border-Radius: 0 0 3px 3px;}. Hintergrund: #C43C3D;}Für die beiden Pseudo-Elemente: Vor und: Nach: Nachdem können Sie sich meinen vorherigen Blog ansehen.
Der JS -Code lautet wie folgt:
Funktion Dropdown (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 (Ereignis) {$ (this) .togGleClass ('active'). selings (). removeclass ('active'); Ereignis.StopPropagation ();}); obj.li.on ('click', function () {var opt = $ (this); obj.val = opt.html (); if (obj.span.html () == obj.val); });Hier wird ein Dropdown-Objekt im Kombinationsmodus Konstruktor-Prototypen erstellt. Der Konstruktor-Prototyp-Kombinationsmodus wird erläutert: Das Attribut wird im Konstruktor geschrieben, das die für jede Instanz eindeutigen Attribute darstellt, so dass das Objekt konkret ist; Die Methode ist außerhalb des Konstruktors geschrieben, das die von jeder Instanz geteilte Methode darstellt.
Ein wenig schlechter Weg hier ist, dass das Layout der HTML eingeschränkt wurde.
Wunderbares Thema Target: JavaScript Auswahlfeldbox Betrieb Zusammenfassung JQuery Auswahlbox Betrieb Zusammenfassung
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.