Some effects related to using CSS3 to implement the Purge button of a text box

New skill Transfer-beep beep beep

Search Type searching box, designers often design a fork icon, indicating that the user point can clear the content of the input. Let's say this:

It's a great experience!

In current modern browsers, the Type=search input box in the Chrome browser has a dynamic rendering of the purge button, but the search box size is not very well controlled (padding ignored); Firefox browser looks like any type of input boxes are indifferent; ie10+ Browser seemingly any input box will appear the Purge button, but a little bit rough, the designer students can not accept.

Seemingly not harmonious, how? to impart a new skill, using HTML and CSS, to simulate the search box that the Purge button can dynamically render.

CSS as follows:

CSS code copy content to clipboard

. input {padding:5px; margin:0; border:1px solid #beceeb;}

. clear {display:none; position:absolute; width:16px; height:16px; margin:6px 0 0-20px; Background:url (clear.png);}

. input::-ms-clear {Display:none}

. Input:valid +. Clear {display:inline;}

HTML as follows:

Enter any content:

xml/html code to copy content to clipboard

And then there is the effect of a screenshot like the following (all from Firefox browser):

The hand is real, the eye view is empty. You can ruthlessly click here: CSS and text box to clear the button hidden demo

Implementation principle

HTML section

Because the Search type text box is poorly controlled under Chrome/opera/safari, the default type (i.e. text type) is used;

Required is a necessary attribute, in conjunction with the CSS pseudo class to achieve our results.

CSS Section

Use is: Valid Pseudo class. This is the new pseudo class, ie10+, and other modern browser support in the CSS3, which represents the legality of the form. Because there is a HTML5 form validation property required in HTML. As a result, if the text box is not content, it is illegal, content, then legitimate, will trigger here: valid Pseudo class selector. And here: The valid pseudo class controls The purge button behind the display, and it achieves the effect we want.

Ah, that's right. IE11 Browser does not all text boxes have a black fork, will overlap with the Custom purge button here::-ms-clear {display:none;} This piece of code can go to the ~ ~

More pseudo elements changing the default style of form controls can refer to the article "pseudo element changes the default style of form controls."

Added in the following day: to the company with IE11 measured, no effect. Later found, not pseudo classes do not recognize, but the brother selector of the rendering bug. By modifying the transparency for 0→1 changes, the mouse hover clears the button position, the button appears or is hidden (see GIF below). No strange tricks have been found to fix the problem.

Comments have said that the Mac under the Chrome browser cannot be cleared. Tested by yourself, it's OK. If it means clicking on the Close button to clear, there is nothing CSS can do.

Benefits of Implementation

The advantage of this approach compared to the traditional JS implementation is that it is simpler. JS words also listen to input events (input) and so on, compare toss. CSS words completely browser their own event characteristics, obviously, more efficient and simpler.

Deficiencies in implementation

The disadvantage is that compatibility. The browser under ie9-can only light candles.

However, writing prototypes, demo, or incremental enhancements, or mobile-side development, can try this new skill.

Note: Click Fork is not clear, this article is just input control hidden!!