在使用CSS3文本框的清除按钮相关的一些影响
新技能传授-哔哔声
搜索型搜索框中,设计者经常设计一个交叉图标,表示用户输入内容可以被清除:
这是一次很好的经历!
现代的浏览器,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以下只能以蜡烛。
但是编写原型,演示,或增量使用,或者移动终端开发,可以尝试这种新技能。
注意:它不清楚单击,这只是显式和隐式输入控件!!