Saltar al contenido principal Saltar a la navegación de documentos
Check
in English

Etiquetas flotantes

Cree etiquetas de formulario hermosamente simples que floten sobre sus campos de entrada.

En esta página

Ejemplo

Envuelva un par de elementos <input class="form-control">y para habilitar etiquetas flotantes con campos de formulario de texto de Bootstrap. Se requiere A en cada uno , ya que nuestro método de etiquetas flotantes de solo CSS utiliza el pseudoelemento. También tenga en cuenta que debe ir primero para que podamos utilizar un selector de hermanos (p. ej., ).<label>.form-floatingplaceholder<input>:placeholder-shown<input>~

html 
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

Cuando ya hay un valuedefinido, <label>los s se ajustarán automáticamente a su posición flotante.

html 
<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

Los estilos de validación de formularios también funcionan como se esperaba.

html 
<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

áreas de texto

Por defecto, <textarea>s with .form-controltendrá la misma altura que <input>s.

html 
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Para establecer una altura personalizada en su <textarea>, no use el rowsatributo. En su lugar, establezca un explícito height(ya sea en línea o a través de CSS personalizado).

html 
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

Selecciona

Aparte de .form-control, las etiquetas flotantes solo están disponibles en .form-selects. Funcionan de la misma manera, pero a diferencia <input>de s, siempre mostrarán el <label>en su estado flotante. Las selecciones con sizey multipleno son compatibles.

html 
<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

Texto sin formato de solo lectura

Las etiquetas flotantes también son compatibles .form-control-plaintext, lo que puede ser útil para cambiar de un valor editable <input>a un valor de texto sin formato sin afectar el diseño de la página.

html 
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
  <label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
  <label for="floatingPlaintextInput">Input with value</label>
</div>

Grupos de entrada

Las etiquetas flotantes también son compatibles .input-group.

@
html 
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
    <label for="floatingInputGroup1">Username</label>
  </div>
</div>

Al usar .input-groupy .form-floatingjunto con la validación de formularios, -feedbackdebe colocarse fuera de .form-floating, pero dentro de .input-group. Esto significa que los comentarios deberán mostrarse mediante javascript.

@
Por favor, elija un nombre de usuario.
html 
<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
    <label for="floatingInputGroup2">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Diseño

Cuando trabaje con el sistema de cuadrícula Bootstrap, asegúrese de colocar elementos de formulario dentro de las clases de columna.

html 
<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>

Hablar con descaro a

Variables

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;