文章关键字 ‘placeholder’

CSS :placeholder-shown伪类实现Material Design占位符交互效果

2018年12月25日,星期二

表单与label与placeholder

Material Design规范中占位符交互效果是这样的:focus输入框的时候,placeholder会位移到左上角作为一个label存在。以前我们要实现这种效果只能借助JavaScript,实际上,纯CSS就能搞定之,就是借助:placeholder-shown伪类实现。且目前在移动端兼容性不错,可以在实际项目中应用。究竟如何实现?有没有这么神奇?一起进来看看吧~

阅读全文…

周知:CSS -webkit-伪元素选择器不再导致整行无效

2018年12月17日,星期一

-webkit-与伪元素

通常,如果选择器链或组中有无效的伪元素或伪类,则整个选择器列表无效。如果伪元素(但不是伪类)具有-webkit-前缀,那么对于Firefox 63+,Blink、Webkit和Gecko浏览器认为它是有效的,而不会使选择器列表无效。

阅读全文…

伪元素表单控件默认样式重置与自定义大全

2013年06月7日,星期五

所有的form表单元素都有或多或少的伪元素可以重置其浏览器内置的UI样式,我光demo就有17个之多,截图30+之多,本文虽参考之作,自己条条亲自验证设置。虽目前价值并未凸显,但是,过段时间,可能就是宝了。

阅读全文…

HTML5 placeholder实际应用经验分享及拓展

2012年02月6日,星期一


目前,现代浏览器均早已支持placeholder占位符属性。好定西不用白不用啊,因此,在前年,我就将HTML5的placeholder占位符属性应用在实际项目中了。在这一年多的应用中,还是有些磕磕碰碰,在此作为经验分享下。一来加深大家与placeholder的认识,二是希望大家可以积极大胆应用一些HTML5的新特性。
然后,还要对占位符的一些应用做扩展。本文是个排得上位置的长篇,内容多而杂,不过demo啊,截图啊,实例的,代码的都很详尽,内容也都是些值得话时间咀嚼的东西…… 相信会对您的学习有所帮助的。

阅读全文…

完善:HTML5表单新特征简介与举例

2011年01月6日,星期四

本文其实是对去年“你必须知道的28个HTML5特征、窍门和技术”一文其他HTML5表单新特征部分的完善与补充。简单介绍了HTML5中的其他的些input空间类型。

虽描述文字不多,但每种类型都配以丰富的截图展示效果,同时有相应的demo页面方便您亲自查看效果。有需要code的地方也展示了源代码。总之,希望能对您的学习有所帮助。

阅读全文…