当前位置:首页 > 日记 > 正文

在使用CSS3文本框的清除按钮相关的一些影响

在使用CSS3文本框的清除按钮相关的一些影响
本文主要介绍利用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以下只能以蜡烛。

但是编写原型,演示,或增量使用,或者移动终端开发,可以尝试这种新技能。

注意:它不清楚单击,这只是显式和隐式输入控件!!

相关文章

CSS垂直中心的一种简单实现方法

CSS垂直中心的一种简单实现方法

方法,简单实现,中心,电脑软件,CSS,本文主要介绍了CSS垂直中心的简单实现,包括使用变换在CSS3的例子,需要的朋友可以参考一下。 我们都知道,CSS文本对齐:中心与边缘:0汽车可以实现垂直水平,但却没有相应的CSS属性设置,如果你想设置的中心垂直元素可…

如何制作瑞士奶酪的文字效果

如何制作瑞士奶酪的文字效果

奶酪,瑞士,文字效果,电脑软件,1。首先,让我们定义奶酪模式。新的PS图象处理软件文档,200times;200像素,白色背景。新建图层1,设置前景色为黄色,RGB值为251242183,填充层1与前景。选择椭圆选框工具。在工具选项中,选择添加到选区的方式,在画布上选择…

coreldraw10椭圆工具使用详细的解

coreldraw10椭圆工具使用详细的解

解决方案,工具使用,椭圆,详细,电脑软件,本教程主要是介绍coreldraw10椭圆工具的朋友,这是很适合初学者。 coreldraw10椭圆工具使用详细的解决方案 椭圆工具(椭圆工具) 椭圆工具(椭圆工具)可以画椭圆、圆、圆弧和饼图,在选定的椭圆工具(椭圆工具…

ppt如何正确使用一个字体ppt高级教

ppt如何正确使用一个字体ppt高级教

教程,字体,如何正确,高级,电脑软件,在制作PPT课件时,汉字难以处理,个别PPT设计者甚至对中文反感。 浅析其可能原因: 拉丁字母有26个,可变字体:衬线和无衬线字体,等宽等。汉字造型简单的信,大多是等宽字体,可塑性不强; 英语单词的水平线数组长度不同,…

人工智能结合PS创建一个古老而美丽

人工智能结合PS创建一个古老而美丽

图标,人工智能,油灯,创建一个,古老,本教程介绍AI和PS创建一个复古漂亮的马油灯图标的方法。本教程制作的图标非常漂亮,难度相对适中。建议像你这样的朋友一起学习这个教程。 本教程教朋友们创建一个复古ai和PS灯的教程图标,难度适中,适合一定…

通过大量的PS研究,建立一个优雅的黑

通过大量的PS研究,建立一个优雅的黑

照片,建立一个,黑白,优雅,电脑软件,本教程是向朋友介绍PS制作精美黑白照片。本教程带来的照片非常漂亮,难度也不是很大。 本教程教PS照片处理学习者使用PS制作精美的黑白照片。本教程中的图片很漂亮,色彩调整的难度也很小,建议与朋友分享学习…

typecho插件写作教程(四):插件的安装

typecho插件写作教程(四):插件的安装

插件,教程,安装插件,安装,电脑软件,最后,在能够保存配置信息之后,我们就可以开始编写插件的挂载函数了。 首先,我们需要知道系统在所有关键环节都为我们保留了插件点。当我们将系统运行到插件点时,我们将检测这一点中是否有插件,然后执行插件的…

字体设计中的连接技术

字体设计中的连接技术

连接,字体,技术,电脑软件,本教程是向朋友介绍字体设计中的一个朋友。这个教程很好。 字体的连接设计,我简单地概括为单词之间的连接和连接中的单词。 *注:本书内容来自第二章自由字变形字符策略。…

画家手绘一部帅气的黑色跑车

画家手绘一部帅气的黑色跑车

手绘,跑车,画家,帅气,黑色,本教程是介绍给一个朋友,谁使用油漆,使一个英俊的黑色跑车顶部的手绘。效果非常好,但是教程有点难。适合有一定学习基础的朋友。推荐并共同学习。 本案例介绍了画家和友基的应用取得了二画一个漂亮的黑色顶级跑车,教…

对CSS3box-shadow使用介绍

对CSS3box-shadow使用介绍

电脑软件,CSS3box,shadow,本文主要介绍在CSS3盒阴影的使用,这是在一个箱区做阴影效果,你需要的朋友可以参考一下。 一般来说,我们通过框阴影设置框阴影,但是一些我们通常不使用的属性,本文将逐一分析框阴影属性。 语法 CSS代码将内容复制到剪贴…

如何excel2010表显示在同一界面exc

如何excel2010表显示在同一界面exc

界面,教程,显示,在同一,电脑软件,多片,声音是如何优越,但经常从事金融相关的人都不会陌生,处理方法之前,我们可以用来切换开关表,现在有一个我们可以减少手术时间研究方法;mdash;窗口可以重排,多个Excel工作表中一个界面显示。这不仅是我们的方便管…

基于日期显示星座的PHP方法

基于日期显示星座的PHP方法

显示,方法,日期,星座,电脑软件,本文介绍了基于日期共享的PHP星座显示方法,供大家参考,具体实现方法如下: 功能的生肖($ DOB){ 出生日期(美元=M-D 列表($月,日)=爆炸() 如果(($月= = 3 = = 4美元一个月| |)($天> 22美元| |天<21)){ 十二生肖=白羊座; } Elseif…