-
新技能传授-哔哔声
搜索型搜索框中，设计者经常设计一个交叉图标，表示用户输入内容可以被清除：
这是一次很好的经历！
现代的浏览器，Chrome浏览器类型=搜索输入框，会有一个动态的复位按钮出现，但是搜索框的大小是不太好的输入控制（填充火狐浏览器似乎忽略）；任何类型的任何IE10 +浏览器输入框似乎无动于衷；输入框将会出现明显按钮，但略显粗糙。有些设计师，学生不能接受。
不和谐，我该怎么办在HTML和CSS的帮助下，引入一种新的技能来模拟一个可以按动态按钮动态显示的搜索框。
CSS如下：
CSS代码将内容复制到剪贴板。
输入{填充：5px；保证金：0；border: 1px solid # beceeb；}
{显示：无；。明确立场：绝对；宽度：16px；身高：16px；保证金：6px 00 20px；}；}
输入：：- MS清除{显示：无；}
输入：有效+清除。{显示：内联；}
html如下所示：
输入任何内容：
xml代码将内容复制到剪贴板。
然后有一个类似于以下截图的效果（从Firefox浏览器中全部删除）：
手触摸是真实的，眼睛是想象出来的，你可以点击这里：CSS和文本框来清除按钮显示演示。
实现原理
HTML的一部分
由于搜索类型文本框在Chrome浏览器/ Opera Safari浏览器下没有得到很好的控制，所以使用默认类型（即文本类型）。
所需的属性是配合CSS伪类来实现我们的效果的必要属性。
CSS部分
有效的伪类的使用。这是新的伪类，IE10 +，和其他现代浏览器支持CSS3，表明形式是合法的。因为有HTML5的表单验证性能要求。在HTML中，如果文本框不包含内容，则它是非法的；如果内容是合法的，它将在这里触发有效的伪类选择器。这里：清晰的按钮显示后面有效的伪类控件，以便我们想要效果。
啊，那是right.ie11浏览器，并不是所有的文本框有一个黑色的十字架，与报关按钮重叠：MS清楚{显示：无；}这段代码就可以。
更多的伪元素改变了窗体控件的默认样式，可以参考伪元素改变窗体控件默认样式的文本。
添加到下一天：给公司使用IE11测试，没有影响。研究发现，这不是一个伪类选择器，而是兄弟。臭虫。改为0rarr通过修改透明度。当1个改变，鼠标悬停清除按钮的位置，然后按钮出现或隐藏（见下面的GIF），还没有发现卖淫技术已被用来修复问题。
评论说Chrome浏览器不能在Mac下被清除，通过你自己的测试，你可以。如果意思是点击关闭按钮来清除它，CSS确实是无能为力的。
实现的优点
这种方法对传统的js实现的优势是simpler.js也听的输入事件（输入）等。CSS的话完全浏览器自身活动的特点，显然，更高效、更简单。
缺乏实现
不足之处在于兼容性。浏览器IE9以下只能以蜡烛。
但是编写原型，演示，或增量使用，或者移动终端开发，可以尝试这种新技能。
注意：它不清楚单击，这只是显式和隐式输入控件！！