&nbs p;
一、新技能传授-哔哔哔哔
见此图犹如见到神教主，还不跪下膜拜~~
二、新技能传授-哔哔哔哔
search 类型搜索框，设计师常常会设计一个叉叉图标，表示用户点之久可以清除输入的内容。比方说这个：
这是不错的体验！
当前现代浏览器中，Chrome浏览器下 type=search 的输入框会有清除按钮的动态呈现，不过搜索 input 框尺寸不太好控制( padding 无视)；FireFox浏览器貌似任何类型的输入框都无动于衷；IE10+浏览器貌似任何输入框都会出现清除按钮，但是长得略微粗糙了点，设计师同学接受不了。
貌似不和谐了，咋办？传授个新技能，借助 HTML 以及 CSS ，来模拟清除按钮可动态呈现的搜索框。
如下CSS：
.input { padding: 5px; m arg in: 0; border: 1px solid # beceeb; } .clear { dis play : none; pos IT ion: absolute; width: 16px; h ei ght: 16px; mar gin : 6px 0 0 -20px; background: url(clear.png);} .input :: -ms-clear { display: none; } .input :valid + .clear { display: inline; } 如下HT ML ：
输入任意内容：<input class="input" requi red ><a class="clear"></a>
然后就有类似下面截图的效果了（均截自FireFox浏览器）：
手摸为实，眼观为虚。您可以狠狠地点击这里：CSS与文本框上清除按钮显隐Demo
实现原理
HTML部分因为 se Arch 类型文本框在Ch rom e/ opera /Safari下 尺寸 不好控制，因此使用缺省的类型(也就是 text 类型)；
required 是必要属性，配合CSS 伪类 实现我们的效果。 CSS部分
使用的是 :valid 伪类。这是CSS3中新增伪类，IE10+以及其他现代浏览器支持，表示表单合法。由于HTML中的 <input> 有HTML5表单验证属性 required . 于是，如果文本框没有内容，则不合法；有内容，则合法，就会触发这里的 :valid 伪 类选择器 。而这里 :valid 伪类控制后面的清除按钮显示，于是就实现了我们想要的效果。
啊，对了。IE11浏览器下不是所有的文本框都有黑色的叉叉吗，会跟这里的自定义清除按钮重叠， ::-ms-clear { display: none; } 这段代码可以去之~~
更多伪元素 改变 表单控件默认样式可以参考“伪元素改变表单控件默认样式”一文。
补充于翌日： 来 公司 用IE11测了下，没效果。后发现，不是伪类不认识，而是兄弟选择器的渲染bug. 通过修改透明度为0→1变化，鼠标hover清除按钮位置，则按钮出现或隐藏（见下面Gif）。尚未发现什么奇淫技巧修复这个问题。
评论有说mac下C hr ome浏览器无法清除。经自己测试，可以的。如果 意思 是点击关闭按钮清除，确实CSS无能为力。
实现的优点
此方法相比传统JS实现的好处在于，更 简单 了。JS的话还要侦听输入事件( input )等，比较折腾。CSS的话完全浏览器自身事件特性，显然，高效简单的多。
实现的不足
不足在于，兼容性。IE9-以下的浏览器只能点蜡烛了。
不过 ，写写原型啊，demo； 或者 渐进增强使用；或者 移动端开发 等，都可以试试这个新技能。
注意：点击叉叉是不会清除的，本文只是输入控制显隐！！
三、新技能传授-哔哔哔哔
如果你约会迟到了，如果你说“对不起我来晚了+各种理由”，可能就会是下面这个下场：
但是，如果你双手顶礼，单膝下跪，恳切说道：“微臣护驾来迟请娘娘恕罪”（无需任何理由），您可能是这样：
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小tip: CSS动态实现文本框清除按钮的隐藏与显示 全部内容，希望文章能够帮你解决 html5教程-小tip: CSS动态实现文本框清除按钮的隐藏与显示 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小tip: CSS动态实现文本框清除按钮的隐藏与显示的详细内容...