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

利用placeholder-shown选择器巧妙控制搜索按钮的显示与隐藏

placeholder-shown选择器是一个非常酷炫的CSS特性，它允许我们选择输入框的占位符（placeholder）, 仅当占位符可见时（即输入框为空）才生效。这与input[value]不同，后者无法直接判断占位符是否存在。 placeholder-shown与:hover、:checked（复选框技巧）、:focus-within等一样，能够响应用户交互状态。

我们可以利用它来控制搜索按钮的显示：当用户在搜索框中输入文本时显示搜索按钮，否则隐藏。这是一种节省空间的技巧，类似于浮动标签。

首先，我们创建一个语义化的搜索表单：

Search Search

为了隐藏标签，我们使用了sr-only类（此处省略具体样式，该类仅供屏幕阅读器识别）。同时，我们通过隐藏溢出（overflow: hidden）来隐藏按钮。

CSS样式如下：

.search-form {
  --searchButtonWidth: 75px; /* 重复使用该值，提高代码可读性 */
  overflow: hidden;
  position: relative;
}

.search-input {
  width: 100%;
}

.search-button {
  position: absolute;
  left: 100%; /* 将按钮推到表单之外 */
  width: var(--searchButtonWidth);
  transition: 0.2s; /* 添加动画效果 */
}

关键在于，当占位符消失（用户输入文本）时，将搜索按钮拉回表单内：

.search-input:not(:placeholder-shown) ~ .search-button {
  transform: translateX(calc(-1 * var(--searchButtonWidth))); /* 通过translateX将按钮移动回表单内 */
}

最终效果： （此处应插入效果图，但原文未提供）

这个技巧参考了Liam Johnston的Pen。 虽然使用placeholder属性本身存在争议，但其在CSS中直接处理状态的特性非常吸引人，类似于著名的checkbox hack。

浏览器支持度良好，尤其是在Edge采用Chromium内核后。 （此处应插入浏览器支持表格，但原文表格内容为空）

以上是显示搜索字段非空的搜索按钮的详细内容。更多信息请关注PHP中文网其他相关文章！