Let’s look at a very common search box interaction. 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 to clear the input field
  3. The search result float is displayed only when the input field has content and is in focus
  4. Click on the search term to close the entire search result float

Indicated as follows

It seems like a lot of logic, but it can be implemented with pure CSS. Take two or three minutes to look at it

I. Interaction of input box clear button

Let’s start with the native implementation.

1. HTML5 added form elements

A new form type=search has been added in HTML5, as follows

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

Naturally supports clearance

Then you just need to beautify the default clear button. Chrome can use ::-webkit-search-cancel-button. Internet Explorer can use ::ms-clear

[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 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 312 l - 65.1-4.7 4.7 12.3 4.7 65.6 c - 17 0 l134. 4 338 c - 4.7-4.7-4.7-12.3 0-17 l65. 6-65-65.6-65.1 - c - 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 256 l65. 6 65.1 z '% 3 e % 3 c/path % 3 e % 3 c/SVG % 3 e") center no-repeat;
    background-size: 16px;
    cursor: pointer;
    opacity:.4;
    transition:.2s;
}
Copy the code

That will do

2. Implementation in Firefox

However, this method does not work in Firefox, firefox does not have a clear button, the same as the normal input field (the following image shows firefox)

If it’s PC and user oriented, Firefox still can’t be ignored, so how to deal with that?

You can start by manually adding a button

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

And then the appropriate beautification (I believe it is not difficult), you can get such an effect

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

If there is content, it means it is not empty, which means it is required. If there is content, it means it is valid, which means it is matched by the :valid selector. The concrete implementation is as follows

Add a required attribute to the input

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

Then hide the clear button by default, with the adjacent selector + can be achieved ~

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

The effect is as follows (as shown in Firefox below)

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

In HTML5 forms, you can reset everything directly with type=reset, so you need to modify the structure by changing the outer div to form and adding the Type =reset attribute to the button, as follows

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

This clears the search box (shown in Firefox below), although other browsers also support it

The unfortunate thing about this approach is that the input box does not focus after clearing

Second, search prompts float layer automatically display

Start with the HTML structure of the search tip

<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>
Copy the code

The search result is hidden by default, and then there is content in the input box (: VALID), and only displayed in the case of focus (:focus), with brother selector ~ can be implemented as follows:

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

Results the following

Search for events on the float

The above effect appears to be fine; clicking on the search term does turn off the entire search result.

But in fact, as long as there is a problem, click close is due to the input box lost focus, if you add a click event to the search item, it may be closed before triggering the event, such as

<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>
Copy the code

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

Click: mouseDown → mouseup: Click: mouseDown → Mouseup: MouseDown → Mouseup

To solve this problem, you can replace onclick with onmouseDown, but this obviously doesn’t solve the problem at all, as there are many times when the search entry has the href attribute

<div class="search-list">
   <a class="search-item" href="? id=1">Search Results 1</a>
</div>
Copy the code

It doesn’t jump properly either.

So what’s the solution?

Here is a very simple trick, in the click of the time to force the display can not be? Click can be matched with :active, so it can be implemented like this:

.input:focus:valid~.search-list..search-list:active{ /* Also displays */ when clicked
    visibility: visible;
}
Copy the code

This will normally trigger click and jump events (console print)

Full code can access CSS search (codepen.io)

Full Firefox compatible code can access CSS Search Firefox (codepen.io)

Iv. Summary and explanation

The above implementation of a search input related to the interaction effect, no layout skills, the core is the rational use of selector, the following summary of the implementation of the key:

  1. The input field can use HTML5 newtype=searchProperty, naturally support the clear function, unfortunately firefox does not support
  2. Input field SettingsrequredPost-attribute combination:validThe selector determines whether there is content
  3. informYou can pass it on the formtype=reset 的 buttonReset the input
  4. Click failure occurs because the input field is out of focus before the click event and can be used:activeTo match click-related behavior
  5. A variety of selectors can be combined to achieve a more flexible interaction effect
  6. Compatibility IE 10+, can almost be used in production environment

The advantage of using CSS to complete the interaction is a higher fault tolerance rate, will not lead to website crash, performance is also better, many times JS error leads to the whole site directly white screen, completely unavailable, CSS does not exist such a problem