文章关键字 ‘:valid’

如何让文字作为CSS背景图片显示?

2020年10月20日,星期二

文本变CSS背景封面图

本文介绍一种非常实用的技术,借助SVG让普通的text文字可以直接作为CSS背景图,方便实现很多的布局与样式效果。本文还提供转换工具和多个实时渲染的精彩案例,保证可以让大家学到不少东西。

阅读全文…

checkValidity等form原生JS验证方法和属性详细介绍

2019年08月18日,星期日

本文介绍form表单元素内置3个验证方法和1个属性,3个方法分别是checkValidity(), reportValidity(), setCustomValidity()方法,1个属性是validity属性。不了解的小伙伴可以进来了解一下。

阅读全文…

CSS蛋疼应用之:数据上报和HTML验证

2018年12月6日,星期四

介绍两个我觉得比较蛋疼但有意思的CSS应用,一个就是纯CSS实现数据上报,用户行为跟踪;另外一个就是纯CSS实现HTML验证,并且在页面上进行提示。比较有脑洞,有想法,虽然以后估计用不到,但是,其中新奇的思路说不定对于我们开阔眼界很有帮助。

阅读全文…

小tip: CSS动态实现文本框清除按钮的隐藏与显示

2014年03月28日,星期五

search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。

这是不错的体验!
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。
貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框……

源代码、demo页面、截图一个不少,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3 box-shadow兼容loading效果兼IE10+ CSS Hack介绍

2013年05月29日,星期三


摘要,摘个鬼啊,本来只想来个短篇的,该死的越写越多,这个点了,还有鬼心情写摘要啊。总之,是处理IE10+浏览器非常不错的一篇文章,demo啊,截图啊,源代码显然很多的啦。还有大量关于伪类伪元素的小技巧小知识等……就这样,我先撤了~~~

阅读全文…