Mostrar botón de búsqueda cuando el campo de búsqueda no está vacío | Programar Plus ▷ Tutoriales

creo que el :placeholder-shown selector es tremendamente genial. Le permite seleccionar el marcador de posición de una entrada (<input placeholder="...">) cuando ese marcador de posición está presente. Es decir, la entrada aún no tiene ningún valor. Tú puedes pensar input[value] podría hacer eso, o ayudar a hacer coincidir el valor real, pero no puede.

Esto hace :placeholder-shown una de las pocas propiedades de CSS que tenemos que puede reaccionar al estado iniciado por el usuario que se une a los gustos de :hover-y amigos, :checked (hack de casilla de verificación!), y el también increíble :focus-within.

Una forma en que podemos usarlo es para comprobar si el usuario ingresó algún texto en un campo de búsqueda. En caso afirmativo, revele el botón de búsqueda visualmente (nunca lo oculte para la tecnología de asistencia). Si no, déjalo oculto. Es solo una pequeña y divertida técnica de “ahorro de espacio” que no es terrible, a diferencia de las etiquetas flotantes.

Entonces, tal vez comencemos con un formulario de búsqueda semántica:

<form action="#" method="GET" class="search-form">
  <!-- Placeholders aren't labels! So let's have a real label -->
  <label for="search" class="screen-reader-text">Search</label>
  <input id="search" type="search" class="search-input" placeholder="Enter search terms...">
  <button class="search-button">Search</button>
</form>

Ocultamos la etiqueta de búsqueda visualmente con una de esas clases especiales solo para lectores de pantalla porque siempre estará oculta visualmente. Pero ocultaremos el botón empujándolo fuera del formulario con desbordamiento oculto.

.search-form {
  /* we'll re-use this number, so DRYing up */
  --searchButtonWidth: 75px;

  overflow: hidden;
  position: relative;
}

.search-input {
  /* take full width of form */
  width: 100%;
}

.search-button {
  position: absolute; 
  /* push outside the form, hiding it */
  left: 100%;
  width: var(--searchButtonWidth);
}

Luego, el truco es volver a presionar el botón de búsqueda cuando el marcador de posición desaparece (el usuario ha ingresado un valor):

/* ... */

.search-input:not(:placeholder-shown) ~ .search-button {
  /* pull back the negative value of the width */
  transform: translateX(calc(-1 * var(--searchButtonWidth)));
}
.search-button {
  position: absolute; 
  left: 100%;
  width: var(--searchButtonWidth);
  /* animate it */
  transition: 0.2s;
}

Que termina así:

ver la pluma
:botón revelador con marcador de posición de Chris Coyier (@chriscoyier)
en CodePen.

Vi esta idea en un Pen de Liam Johnston. ¡Buena idea, Liam!

Sé que usando el placeholder atributo en absoluto es cuestionable, por lo que su millaje puede variar. Admito que estoy más intrigado por los aspectos de manejo de estado directamente en CSS y cómo se puede usar, como el infame truco de la casilla de verificación.

El soporte es bueno. Uno de esos en los que cuando Edge es firmemente Chromium, está claro.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y en adelante.

Escritorio

Cromo	Firefox	ES DECIR	Borde	Safari
47	51	11*	79	9

Móvil / Tableta

Android cromo	android firefox	Androide	iOSSafari
96	95	96	9.0-9.2