Show Search Button when Search Field is Non-Empty

Use placeholder-shown selector to smartly control the display and hiding of search buttons

placeholder-shown selector is a very cool CSS feature that allows us to select placeholders for input boxes, which will only take effect when the placeholder is visible (i.e., the input box is empty). This is different from input[value] , which cannot directly determine whether the placeholder exists. placeholder-shown is the same as :hover , :checked (checkbox skills), :focus-within etc., and can respond to user interaction status.

We can use it to control the display of the search button: the search button is displayed when the user enters text in the search box, otherwise it is hidden. This is a space-saving technique, similar to floating tags.

First, we create a semantic search form:

Search Search

To hide the tags, we use the sr-only class (the specific style is omitted here, which is only for screen readers to recognize). At the same time, we hide the buttons by hiding overflow ( overflow: hidden ).

The CSS style is as follows:

 .search-form {
  --searchButtonWidth: 75px; /* Reuse this value to improve code readability*/
  overflow: hidden;
  position: relative;
}

.search-input {
  width: 100%;
}

.search-button {
  position: absolute;
  left: 100%; /* Push the button outside the form*/
  width: var(--searchButtonWidth);
  transition: 0.2s; /* Add animation effect*/
}

The key is to pull the search button back into the form when the placeholder disappears (user enters text):

 .search-input:not(:placeholder-shown) ~ .search-button {
  transform: translateX(calc(-1 * var(--searchButtonWidth))); /* Move the button back into the form via translateX*/
}

Final effect: (The rendering should be inserted here, but not provided in the original text)

This technique is referenced by Liam Johnston's Pen. While the use of the placeholder property itself is controversial, its feature of directly handling state in CSS is very attractive, similar to the famous checkbox hack.

Browser support is good, especially after Edge adopts the Chromium kernel. (The browser support form should be inserted here, but the original form content is empty)

The above is the detailed content of Show Search Button when Search Field is Non-Empty. For more information, please follow other related articles on the PHP Chinese website!