CSS与文本框上清除按钮的隐藏与显示实例页面

回到相关文章 »

代码:

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) no-repeat; outline: none; }
.input::-ms-clear { display: none; }
.input:valid + .clear { display: inline; }
                
HTML代码:
输入任意内容:<input class="input" required><a href="javascript:" class="clear"></a>
                

效果:

输入任意内容: