Such Button Anzeigen, Wenn Suchfeld Nicht Leer Ist

Ich finde den :placeholder-shown-Selektor unglaublich cool. Er ermöglicht es Ihnen, den Platzhalter eines Eingabefeldes (<input placeholder="...">) auszuwählen, wenn dieser Platzhalter vorhanden ist. Das bedeutet, das Eingabefeld hat noch keinen Wert. Sie denken vielleicht, dass input[value] das tun könnte oder beim tatsächlichen Wert hilft, aber das ist nicht der Fall.

Dies macht :placeholder-shown zu einer der wenigen CSS-Eigenschaften, die auf einen vom Benutzer initiierten Zustand reagieren können, neben :hover und seinen Verwandten, :checked (Checkbox-Hack!) und dem ebenfalls großartigen :focus-within.

Eine Möglichkeit, dies zu nutzen, ist zu prüfen, **ob der Benutzer Text in ein Suchfeld eingegeben hat**. Wenn ja, dann wird der Suchbutton visuell angezeigt (nie für assistierende Technologien versteckt). Wenn nein, dann bleibt er versteckt. Es ist einfach eine lustige kleine "platzsparende" Technik, nicht viel anders als Float Labels.

Also, vielleicht beginnen wir mit einem semantischen Suchformular

<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>

Wir verstecken das Suchlabel visuell mit einer dieser speziellen Screen-Reader-Only-Klassen, da es immer visuell versteckt sein wird. Aber wir verstecken den Button, indem wir ihn mit verstecktem Überlauf aus dem Formular schieben.

.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);
}

Dann ist der Trick, den Suchbutton wieder hereinzuziehen, wenn der Platzhalter verschwindet (Benutzer hat einen Wert eingegeben)

/* ... */

.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;
}

Was dann so aussieht

Sehen Sie den Pen
:placeholder-shown enthüllt Button von Chris Coyier (@chriscoyier)
auf CodePen.

Ich habe diese Idee in einem Pen von Liam Johnston gesehen. Coole Idee, Liam!

Ich weiß, dass die Verwendung des placeholder-Attributs generell fragwürdig ist, daher kann Ihre Erfahrung variieren. Ich gebe zu, dass mich vor allem die Aspekte der Zustandsverwaltung direkt in CSS und wie sie verwendet werden kann – ähnlich dem berüchtigten Checkbox-Hack – faszinieren.

Die Unterstützung ist gut. Eines von denen, bei denen Edge fest Chromium ist, ist sie aus dem Rennen.