Bulma es un marco CSS gratuito y de código abierto basado en flexbox . Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
La selección múltiple de Bulma se usa para crear un estilo de elementos desplegables de selección múltiple . Los elementos de selección múltiple se crean mediante el uso de modificadores is-multiple utilizando los atributos múltiples HTML <select> .
Clases de selección múltiple:
- is-multiple: se utiliza para crear un menú de elementos de selección múltiple de la lista desplegable.
Sintaxis:
<div class="select is-multiple">
<select multiple size="">
<option value=""> ... </option>
</select>
</div>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Multiple select</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-1 has-text-success"> GeeksforGeeks </h1> <p class="is-size-3">Bulma Multiple select</p> <div class="container"> <div class="select is-multiple"> <select multiple size="5"> <option value="webdev">Web Technology</option> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JavaScript</option> <option value="php">PHP</option> </select> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/form/select/#multiple-select