[譯]這多是最好用的 CSS 技巧

原文連接：xtrp.io/blog/2019/1…

假設你在建立一個搜索表單。用戶輸入內容，而後點擊搜索按鈕進行搜索。

這裏是可供參數的 HTML 代碼：

<input placeholder="Search...">
<button>Search!</button>
複製代碼

須要注意的是，搜索按鈕只在輸入框中輸入內容後，才能點擊。咱們總不能容許用戶使用空字符串搜索吧？

JavaScript 的方式

咱們可使用下面的代碼實現上述功能。

inputElement.oninput = function(e) {
    if(inputElement.value != "") {
        activateSearchButton();
    } else {
        deactivateSearchButton();
    }
};
複製代碼

酷酷的 CSS 方式

在我看來，不使用 JavaScript 的狀況下，使用 CSS :not(:placeholder-shown) 僞類方式更好。這個選擇器由兩部分組成：:not() 和 :placeholder-shown。

• :placeholder-shown：顧名思義，這個僞類僅在輸入框中的佔位文本顯示的時候，才生效。若是輸入框中輸入內容，則佔位文本不顯示；若是輸入框爲空，則佔位文本顯示。
• :not()：接受選擇器做爲參數，對該選擇器以外的元素應用樣式。

因此，:not(:placeholder-shown) 就表示輸入框有內容時，爲它應用樣式。

咱們或者結合 CSS + 操做符一塊兒使用，來完善搜索按鈕的功能。

button {
  display: none;
}

input:not(:placeholder-shown) + button {
  display: block;
}
複製代碼

請看下面的效果。當用戶輸入內容了，搜索按鈕就會顯示，不然不顯示。與 JavaScript 惟一不一樣的地方……就是沒有 JavaScript。

另一個有趣的用例

咱們還能夠把上面的 :not(:placeholder-shown) 結合 :focus 僞類一塊兒使用。這樣的話，行爲就變成了當在輸入框中輸入內容時，才應用樣式：

<style> /* 這塊的邏輯是：當 inpout focus 且用戶輸入了內容時，提示「You are typing」 */ input:focus:not(:placeholder-shown) + #otherElement { display: block; } /* 默認「You are typing」的文本是隱藏的 */ #otherElement { display: none; } </style>

<input type="text" placeholder="type something">
<p id="otherElement">You are typing</p>
複製代碼

總結

這是一個很是巧妙的技巧，在建立搜索表單、登陸表單等頗有用。我但願你喜歡這篇文章，並發現這個 CSS 技巧有對你有用。固然，:not(:placeholder-shown) 僞類並不適應於全部瀏覽器，我的建議你在網站裏使用前先檢查下瀏覽器的兼容性。

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個貓奴而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）