搜索字段非空时显示搜索按钮

我认为 :placeholder-shown 选择器非常酷。 它允许您在占位符存在时选择输入的占位符 (<input placeholder="...">)。 也就是说，输入还没有任何值。 您可能会认为 input[value] 可以做到这一点，或者帮助匹配实际值，但它做不到。

这使得 :placeholder-shown 成为我们拥有的少数几个可以对用户发起的状态做出反应的 CSS 属性之一，加入了 :hover 及其同类、:checked (复选框技巧！) 以及同样出色的 :focus-within。

我们可以使用它的一种方法是检查**用户是否在搜索字段中输入了任何文本**。 如果是，则在视觉上显示搜索按钮（绝不隐藏辅助技术）。 如果否，则保持隐藏状态。 这只是一个有趣的“节省空间”技巧，与 浮动标签 非常相似。

因此，也许我们从一个语义搜索表单开始

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

我们使用其中一个 特殊的仅屏幕阅读器类 在视觉上隐藏搜索标签，因为它将始终在视觉上隐藏。 但我们将通过将按钮推到表单外部并隐藏溢出来隐藏按钮。

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

然后诀窍是在占位符消失（用户已输入值）时将搜索按钮拉回

/* ... */

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

最终效果如下

查看 Chris Coyier 的 CodePen
:placeholder-shown 显示按钮 (@chriscoyier)
在 CodePen 上。

我在 Liam Johnston 的一个 CodePen 中看到了这个想法。 好主意，Liam！

我知道完全使用 placeholder 属性是 值得怀疑的，因此您的使用情况可能会有所不同。 我承认我主要对它在 CSS 中的直接状态处理方面以及它如何使用（例如臭名昭著的复选框技巧）感到好奇。

支持度良好。 当 Edge 成为 Chromium 后，它就变得非常清晰了。