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.
El color seleccionado de Bulma se usa para establecer el color en el elemento seleccionado. El color se aplica en el borde y el icono desplegable del menú de selección.
Bulma selecciona clases de colores:
- is-primary: se utiliza para establecer el color del menú de selección en cian claro.
- is-link: se utiliza para establecer el color del menú de selección en azul.
- is-info: Se utiliza para establecer el color del menú de selección en azul claro.
- is-success: Se utiliza para establecer el color del menú de selección en verde.
- is-warning: Se utiliza para establecer el color del menú de selección en amarillo.
- is-danger: Se utiliza para establecer el color del menú de selección en rojo.
Sintaxis:
<div class="select is-primary">
<select>
<option> ... </option>
</select>
</div>
Ejemplo: Este ejemplo muestra los colores seleccionados de Bulma.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Select Colors</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 Select Colors</p> <div class="container"> <div class="select is-primary"> <select> <option>Primary Color Select Menu</option> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> </select> </div> <br><br> <div class="select is-link"> <select> <option>Link Color Select Menu</option> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> </select> </div> <br><br> <div class="select is-info"> <select> <option>Info Color Select Menu</option> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> </select> </div> <br><br> <div class="select is-success"> <select> <option>Success Color Select Menu</option> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> </select> </div> <br><br> <div class="select is-warning"> <select> <option>Warning Color Select Menu</option> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> </select> </div> <br><br> <div class="select is-danger"> <select> <option>Danger Color Select Menu</option> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> </select> </div> </div> </body> </html>
Producción:
Bulma Seleccione Colores
Referencia: https://bulma.io/documentation/form/select/#colors