Menú desplegable personalizado seleccione en JavaScript puro-personalizado-seleccione

Vista prévia

Descripción

la selección personalizada es pequeña y la biblioteca JavaScript libre de dependencias le ayuda a crear una lista desplegable personalizada y animada a partir del elemento Select nativo.

Funcionamiento

Instale & importar la selección personalizada.

# NPM
$ npm install custom-select --save

// ES 6
import customSelect from 'custom-select';

// CommonJS:
const customSelect = require('custom-select');

O incluya el JavaScript compilado & archivos CSS en la página.

<link rel="stylesheet" href="custom-select.css">
<script src="custom-select.min.js"></script>

Inicializar la biblioteca en un elemento de selección normal y listo.

<select id="example">

<option value>Select...</option>

<option value="foo">Foo</option>

<option value="buzz">Buzz</option>
</select>

const mySelect = customSelect("select");

Parámetros predeterminados (clases CSS). Útil para crear sus propios estilos para la lista desplegable.

const mySelect = customSelect("select",{



containerClass: "custom-select-container",



openerClass: "custom-select-opener",



panelClass: "custom-select-panel",



optionClass: "custom-select-option",



optgroupClass: "custom-select-optgroup",



isSelectedClass: "is-selected",



hasFocusClass: "has-focus",



isDisabledClass: "is-disabled",



isOpenClass: "is-open"
});