El estilo predeterminado de selección es a menudo feo. Para garantizar el estilo uniforme de la página, se debe embellecer. Aunque hay muchos complementos embellecidos, que buscan mucho, es realmente un dolor de cabeza para introducir archivos CSS largos y archivos JS. De hecho, el principio de implementación de SELECT es muy simple, es un proceso de hacer clic para cambiar de pantalla, ocultar y pasar valores. Lo simulé con jQuery y escribo el estilo que desee, sin limitar el número.
Efectos simples:
HTML:
<viv> <font>› </font> <span> opción 1 </span> <ul> <li> opción 1 </li> <li> opción 1 </li> <li> opción 2 </li> <li> opción 3 </li> </ul> </div> <div> <font>! </font> <pan> opción 1 </span> <li> opción </li> li> li> li> li> 3 </li> </ul> </div>
CSS:
ul {margen: 0; relleno: 0; Estilo de lista: Ninguno;}. Select_box {Width: 200px; Altura: 36px; borde: 1px sólido #3cf; Posición: relativo; flotante: izquierda; margen-right: 50px;}. Select_box span {display: inline-block; Ancho: 200px; Altura: 36px; Curvesor: puntero; Text-Indent: 10px;}. SELECT_BOX .Span_AA {Color:#C36;}. SELECT_BOX UL {width: 200px; Posición: Absoluto; arriba: 36px; Izquierda: -1px; borde: 1px sólido #3cf; Pantalla: ninguno; fondo: #fff;}. select_box li {cursor: pointer; Línea de altura: 36px; text-indent: 10px;}. SELECT_BOX LI: Hover {fondo:#39f; color: #fff;}. select_box font {posición: absoluto; Derecha: 10px; tamaño de fuente: 26px; Font-Family: "Microsoft Yahei"; Color:#3CF; transformar: rotar (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');}); $ (documento) .Click (function () {s_title.removeclass ("span_aa"); $ (". select_box ul"). Hide ();});Descarga del código fuente: JS Seleccionar el cuadro desplegable Descargar el embellecimiento
Si aún desea aprender en profundidad, puede hacer clic en el resumen del efecto del cuadro desplegable JQuery y el resumen del efecto de la casilla desplegable JavaScript para aprender.
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.