![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
不为人知的技巧
聪明的汤姆k
喜欢研究不为人知的前端技巧,公众号「前端宇宙情报局」作者
展开
-
你可能不知道的css骚操作 — 表单验证♂️
效果图原理表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号、邮箱、身份证…);valid伪类,可以匹配通过pattern验证的元素;invalid伪类则相反,可以匹配未通过pattern验证的元素;于是就可以随便搞啦,上面的效果图只是做一些简单的效果,更多效果以及限制大家就发挥自己的想象力咯;html布局很简单,input跟button是兄弟节点的关系,requir...原创 2019-08-07 10:34:30 · 288 阅读 · 0 评论 -
讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻♂️
像rate评分组件一般都用javascript写,大概一年前,我在简书写过一篇文章原生Javascript实现星星评分组件,感兴趣的可以去看一下,很久之前写的,我不知道之前的代码有多啰嗦,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行原创 2019-08-19 16:40:59 · 96 阅读 · 0 评论 -
如何把css'content的操作跟价值发挥到最大
content属性需要与before及after伪元素配合使用,作用是可以定义伪元素所显示的内容,本文主要列举content的可选值及实用的案例与技巧原创 2019-08-19 16:43:31 · 260 阅读 · 0 评论 -
user-modify跟style标签可真是天生一对
前来挖墙脚的是html中的contenteditable,他是一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea,不过还是存在许多不足跟问题,比如没有change钩子等,本文不作深入探讨❌开胃使一个div可以进行内容编辑:<div contenteditable>点击我进行编辑</div>乍一看,好像很普通,但是它可以解决一个...原创 2019-08-12 18:33:26 · 559 阅读 · 0 评论