CSS for search-related interaction

Let's first look at a very common search box interaction, the approximate logic is as follows

1. The clear button is displayed when there is content in the input box
2. Click the clear button and the input box will be cleared
3. The search result floating layer is displayed when the input box has content and is in focus
4. Close the entire search result floating layer after clicking the search item

The schematic is as follows

Looks at the logic seems to be a lot, in fact, it can also be implemented in pure CSS, take a look at it together in two or three minutes

One, the interaction of the clear button of the input box

First look at the native implementation.

1. HTML5 new form elements

type=search has been added in HTML5, as follows

<input class="input" type="search" placeholder="请输入关键词">

Naturally supports removal function

Then just need to beautify the default Clear button on it, chrome can be used ::-webkit-search-cancel-button , IE can be used ::ms-clear , chrome here for 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 the same as the normal input box (the following picture shows the performance of firefox)

If it is PC-side and user-oriented, firefox still cannot be ignored, then how to deal with it?

You can manually add a button first

<input class="input" type="search" placeholder="请输入关键词">
<button class="clear"></button>

Then beautify it appropriately (I believe it's not a difficult task), you can get this effect

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

Think of it this way: if there is content, it means that it is not empty, which means that it is required required attribute. When there is content, it means that it is legal. It can match the :valid selector, so you can distinguish it. The specific implementation is as follows

Add a required attribute to input

<input class="input" placeholder="请输入关键词" required>
<button class="clear"></button>

Then the clear button is hidden by default, and it can be achieved +

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

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

Then there is the function of clearing the input box. If you don't use JS, is there any way to clear the input box?

In the HTML5 form, you can type=reset , so here you need to modify the structure, change the outer layer div to form , and then add the type=reset button , as follows

<form class="search">
    <input class="input" placeholder="请输入关键词">
      <button class="clear" type="reset"></button>
</form>

This will clear the search box (the picture below shows the performance of firefox), of course, other browsers are also supported

The slight regret of this method is that the input box cannot be focused after clearing.

Second, the search prompt automatically displays the floating layer

Add the HTML structure of the search prompt first

<div class="search">
  <input class="input" placeholder="请输入关键词" />
  <div class="search-list">
        <a class="search-item">搜索结果1</a>
        <a class="search-item">搜索结果2</a>
        <a class="search-item">搜索结果3</a>
    </div>
</div>

The search result is hidden by default, and then there is content in the input box ( :valid ), and it is displayed only when it is focused ( :focus ). With the brother selector ~ following can be achieved:

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

The effect is as follows

Third, search for events on the floating layer

The above effect seems to be no problem. After clicking the search item, the entire search result is indeed closed.

But in fact, as long as there is a question, click on the shutdown is due to the input box loses focus, If you add a click event on the search terms, there may not trigger events shut down , such as

<form class="search">
    <input class="input" placeholder="请输入关键词">
    <div class="search-list">
        <a class="search-item" onclick="console.log(1)">搜索结果1</a>
        <a class="search-item">搜索结果2</a>
        <a class="search-item">搜索结果3</a>
    </div>
</form>

The effect is as follows, the click event is not triggered when clicked (the console is not printed)

The reason is simple, the Click fact can be seen as mouseDown mouseUp → , in mouseDown immediately after the out of focus, and before mouseUp to close the prompt suspension layer, so the incident did not trigger.

In order to solve this problem, you can replace onclick onmousedown , but this obviously does not solve the problem at all. For example, often the search item has the attribute href

<div class="search-list">
   <a class="search-item" href="?id=1">搜索结果1</a>
</div>

This also cannot jump correctly.

How to solve it?

Here is a very simple trick. Isn’t it enough to force the display when you click it? Clicking can :active , so it can be achieved like this:

.input:focus:valid~.search-list,
.search-list:active{ /*点击的时候也显示*/
    visibility: visible;
}

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

The complete code can be accessed at CSS search (codepen.io)

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

Four, summary and explanation

The above achieves an interactive effect related to search input. There are no layout skills. The core lies in the reasonable use of selectors. The following summarizes the implementation key points:

1. The input box can use the new type=search HTML5, which naturally supports the clear function, but unfortunately firefox does not support it.
2. After setting the requred attribute in the input box, combined with the :valid selector to determine whether there is content
3. In form form inside through type=reset of Button content reset input
4. The reason for the 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. Compatibility IE 10+ , almost can be used in production environment

The advantage of using CSS to complete the interaction is that it has a higher fault tolerance rate, will not cause the website to crash, and the performance is better. In many cases, js errors cause the entire website to be blank and completely unavailable. CSS does not have such a problem~ If you think Not bad, if it is helpful to you, please like, bookmark and repost ❤❤❤