Bulma selecciona estilos

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 estilo de selección de Bulma se usa para establecer el estilo en los elementos seleccionados. Solo hay un único estilo que se utiliza en el elemento de selección. Este estilo se utiliza para crear una esquina redondeada en el elemento seleccionado.

Clase de estilo selecto de Bulma:

  • is-rounded: se utiliza para establecer el estilo de esquina redondeada en el elemento seleccionado.

Sintaxis:

<div class="select is-rounded">
  <select>
    <option>option 1</option>
    <option>option 2</option>
  </select>
</div>

Ejemplo: Este ejemplo demuestra la clase de estilo de selección de Bulma .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Select Styles</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 Styles</p>
  
  
    <div class="container">
        <div class="select">
            <select>
              <option>Default Select Style</option>
              <option>HTML</option>
              <option>CSS</option>
              <option>JavaScript</option>
            </select>
          </div>
        <br><br>
  
        <div class="select is-rounded">
            <select>
                <option>Rounded Select Style</option>
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
              </select>
        </div>
    </div>
</body>
  
</html>

Producción:

Bulma Select Styles

Referencia: https://bulma.io/documentation/form/select/#styles

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *