Una tarde estaba perdiendo el tiempo, leyendo artículos en Internet, y me encontré con
este centro de usuarios
de Cyapa , donde está escrito cómo personalizar select en CSS puro. En el proceso de ver esta solución, encontré varios momentos muy incómodos que intenté solucionar en mi solución a este problema. Entonces comencemos.
Mientras miraba el código de esa publicación, noté que el autor hizo una selección que no se puede cerrar al hacer clic fuera de ella, así como la imposibilidad de abrir la selección al hacer clic en el nombre del elemento, si ya está seleccionado.
En mi versión de personalización, yo, como el autor anterior, usé etiqueta, input [type = "radio"] y la potencia de los selectores css. Dado que la selección en sí usando herramientas CSS es completamente imposible de personalizar, imité el comportamiento de la selección.
Para comenzar, agregué el siguiente marcado:
Mostrar código html <label for="select" class="select"> <input type="radio" name="list" value="not_changed" id="bg" checked /> <input type="radio" name="list" value="not_changed" id="select"> <label class="bg" for="bg"></label> <div class="items"> <input type="radio" name="list" value="first_value" id="list[0]"> <label for="list[0]">First option</label> <input type="radio" name="list" value="second_value" id="list[1]"> <label for="list[1]">Second loooooong option</label> <span id="text">Select something...</span> </div> </label>
Al mirar este código, es posible que tenga una pregunta: "¿Por qué todas las entradas tienen el mismo nombre?". Contestaré de inmediato: esto se hace para que nuestra selección se comporte adecuadamente (se abre y cierra cuando es necesario). Pero lo primero es lo primero. Pasemos a la parte más interesante, en mi opinión, css.
Mostrar código CSS input { display: none; } #text { position: absolute; display: block; top: 0; padding-left: 10px; } .select { display: inline-block; width: 160px; height: 34px; line-height: 30px; position: relative; } .select:before { content: ">"; display: inline-block; background: white; position: absolute; right: -5px; top: 2px; z-index: 2; width: 30px; height: 26px; text-align: center; line-height: 26px; border: 2px solid #ddd; transform: rotate(90deg); cursor: pointer; } .select input[name="list"]:not(:checked) ~ #text { color: black; background: white; } .select input[name="list"]:checked ~ #text { background: transparent; color: transparent; z-index: 2; } #select:disabled ~ .items #text { background: #eee; } .items { display: block; min-height: 30px; position: absolute; border: 2px solid #ddd; overflow: hidden; width: 160px; cursor: pointer; } #select:not(:checked) ~ .items { height: 30px; } .items label { border-top: 2px solid #ddd; display: none; padding-left: 10px; background: white; } .items label:hover { background: #eee; cursor: pointer; } #select:checked ~ .items { padding-top: 30px; } #select:checked ~ .items label { display: block; } .items input:checked + label { display: block!important; border: none; background: white; } #select:checked ~ .bg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; background: rgba(0,0,0,0.4); }
Aquí está: la parte más interesante en la que es necesario comprender cómo cambiar la elección de la entrada (todas las entradas con el tipo de radio tienen el mismo nombre => podemos elegir solo una de ellas) afecta nuestra selección. Otra característica de esta opción es la capacidad de deshabilitar la selección usando el atributo deshabilitado en #select.
Puede encontrar un ejemplo terminado
aquí .
Eso, de hecho, es todo. Se corrigieron algunos inconvenientes del autor anterior, por lo que esta solución, creo, en este momento puede considerarse una versión css ideal de select. Espero que mi solución sea útil para alguien.