HTML5 default input content clears the "X" button removal method

inputThe box size is not very good to control ( padding ignore); The Firefox browser seems to be indifferent to any type of input box; The Ie10+ browser appears to have a clear button in any input box, but it is slightly rougher, and the designer can't accept it.

Seems to be not harmonious, how to do? Teach a new skill, using HTML and CSS, to simulate a search box that can be dynamically rendered by the clear button.

The following CSS:

. 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;}

The following HTML:

Enter any content:Required>

And then there's a similar effect.

HTML5 default input content clears the "X" button removal method