顯示搜索字段非空的搜索按鈕

利用placeholder-shown選擇器巧妙控制搜索按鈕的顯示與隱藏

placeholder-shown選擇器是一個非常酷炫的CSS特性，它允許我們選擇輸入框的佔位符（placeholder）, 僅當佔位符可見時（即輸入框為空）才生效。這與input[value]不同，後者無法直接判斷佔位符是否存在。 placeholder-shown與:hover 、 :checked （複選框技巧）、 :focus-within等一樣，能夠響應用戶交互狀態。

我們可以利用它來控制搜索按鈕的顯示：當用戶在搜索框中輸入文本時顯示搜索按鈕，否則隱藏。這是一種節省空間的技巧，類似於浮動標籤。

首先，我們創建一個語義化的搜索表單：

Search Search

為了隱藏標籤，我們使用了sr-only類（此處省略具體樣式，該類僅供屏幕閱讀器識別）。同時，我們通過overflow: hidden 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中文網其他相關文章！