Let's first look at the interaction of a very common search box. The logic is as follows

1. The clear button is displayed only when there is content in the input box
2. Click the clear button and the input box will be cleared
3. The floating layer of search results is displayed only when the input box has content and is in focus
4. Click the search item to close the entire search result floating layer

The schematic diagram is as follows

There seems to be a lot of logic. In fact, it can be implemented in pure CSS. Take two or three minutes to have a look

1, Interaction of input box clear button

First, let's look at the native implementation.

1. Add form elements in HTML5

A form with type=search is added in HTML5, as follows

<input class="input" type="search" placeholder="Please enter keywords">

Naturally, it supports the clearing function

Then just beautify the default clear button. You can use the:: WebKit search cancel button in chrome and:: Ms clear in ie. take chrome as an example

[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    width: 36px;
    height: 36px;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat;
    background-size: 16px;
    cursor: pointer;
    opacity: .4;
    transition: .2s;
}

That's it

2. Implementation under Firefox

However, the above method is invalid in firefox. There is no clear button in firefox, and the performance is consistent with the ordinary input box (the following figure shows the performance of firefox)

If it is PC side and user oriented, firefox can't be ignored. How to deal with it?

You can manually add a button first

<input class="input" type="search" placeholder="Please enter keywords">
<button class="clear"></button>

Then properly beautify it (I believe it's not difficult) and you can get such an effect

Now the clear button has nothing to do with the input box. How to display the clear button when there is input?

Think about it this way: if there is content, it means it is not empty and it means it is required. When referring to the required items, you can think of the required attribute. When there is content, it means it is legal and can be matched with the: valid selector, which can be distinguished. The specific implementation is as follows

Add a required attribute to input

<input class="input" placeholder="Please enter keywords" required>
<button class="clear"></button>

Then the default hide clear button can be realized with the adjacent selector +~

.clear{
    visibility: hidden;
}
.input:valid+.clear{
    visibility: visible;
}

The effect is as follows (the figure below shows the performance of firefox)

Then it is the function of clearing the input box. If JS is not used, what method can you clear the input box?

In the HTML5 form, you can directly reset all contents through type=reset, so you need to modify the structure, change the outer div to form, and then add the type=reset attribute to the button, as shown below

<form class="search">
    <input class="input" placeholder="Please enter keywords">
      <button class="clear" type="reset"></button>
</form>

In this way, the search box can be cleared (the figure below shows the performance of firefox). Of course, other browsers also support it

The slight regret of this method is that the input box fails to focus after clearing

2, Automatic display of search prompt floating layer

HTML structure with search tips first

<div class="search">
  <input class="input" placeholder="Please enter keywords" />
  <div class="search-list">
        <a class="search-item">Search results 1</a>
        <a class="search-item">Search results 2</a>
        <a class="search-item">Search results 3</a>
    </div>
</div>

The search results are hidden by default, and then there is content (: valid) in the input box and only displayed in the focused case (: focus). With the brother selector ~ you can achieve the following:

.search-list{
      position: absolute;
    visibility: hidden;
}
.input:focus:valid~.search-list{
    visibility: visible;
}

The effect is as follows

3, Search prompts for events on the floating layer

The above effect seems to be OK. After clicking the search item, the whole search result is really closed.

But in fact, as long as there is a problem, clicking to close is due to the loss of focus in the input box. If a click event is added to the search item, it may be closed before the event is triggered, for example

<form class="search">
    <input class="input" placeholder="Please enter keywords">
    <div class="search-list">
        <a class="search-item" onclick="console.log(1)">Search results 1</a>
        <a class="search-item">Search results 2</a>
        <a class="search-item">Search results 3</a>
    </div>
</form>

The effect is as follows: the click event is not triggered when clicking (the console does not print)

In fact, the reason is very simple. click can be regarded as mousedown → mouseup. After mouseup, the focus is lost immediately, and the prompt suspension layer is closed before mouseup, so the event is not triggered.

In order to solve this problem, you can replace onclick with onmousedown, but this obviously does not fundamentally solve it. For example, many search items have a href attribute

<div class="search-list">
   <a class="search-item" href="?id=1">Search results 1</a>
</div>

This will not jump correctly.

So how to solve it?

Here is a very simple trick. Don't you just force the display when clicking? Click: active to match, so it can be realized in this way:

.input:focus:valid~.search-list,
.search-list:active{ /*Also displayed when clicked*/
    visibility: visible;
}

In this way, click and jump events can be triggered normally (printed on the console)

The complete code is accessible CSS search (codepen.io)

The complete code compatible with firefox can be accessed CSS search firefox (codepen.io)

4, Summary and description

The above implements an interactive effect related to search input without layout skills. The core lies in the rational use of selectors. The following is a summary of the implementation key points:

1. The input box can use the type=search attribute added in HTML5. It naturally supports the clearing function. Unfortunately, firefox does not support it
2. After the requred attribute is set in the input box, combined with the: valid selector, you can determine whether there is content
3. In the form form, you can reset the input content through the button of type=reset
4. The reason for click failure is that the input box is out of focus before the click event. You can use: active to match the click related behavior
5. The combination of various selectors can achieve more flexible interaction effects
6. Compatible with IE 10 +, it can be used in almost production environment

The advantage of using CSS to complete interaction is that it has a higher fault tolerance rate, will not lead to website collapse and better performance. Many times, js errors lead to the direct white screen of the whole website, which is completely unavailable. There is no such problem with CSS ~ if you think it is good and helpful to you, you are welcome to like, collect and forward ❤❤❤