纯css3实现漂亮的用户注册表单
作者:admin 时间:2021-4-18 9:43:37 浏览:953这个用户注册表单令人眼前一亮,它充分利用Placeholder的特点,当点击输入框的时候,提示文字移到输入框左上角,用户体验非常友好,值得推荐使用,这个漂亮的用户注册表单是用纯CSS3实现的。
纯css3实现漂亮的用户注册表单
CSS代码
HTML代码
代码解释
1、如下CSS代码比较不多见,是本表单的关键代码。
- .input:focus ~ .cut,
- .input:not(:placeholder-shown) ~ .cut {
- transform: translateY(8px);
- }
.input:focus
表示获得焦点的输入字段。
兄弟选择器('~')表示在某元素之后的所有兄弟元素,不一定要紧跟在后面,但必须得是相同父元素,即必须是同一级元素。
.input:not(:placeholder-shown) ~
表示标签选择器不适用于自动填充。
transform: translateY()
Transform字面上就是变形,改变的意思。translateY(Y)
仅垂直方向移动(Y轴移动)。
2、pointer-events: none;
属性
在CSS代码里,看到.placeholder
的属性包含pointer-events: none;
,这里说说这个属性。
- .placeholder {
- color: #65657b;
- font-family: sans-serif;
- left: 20px;
- line-height: 14px;
- pointer-events: none;
- position: absolute;
- transform-origin: 0 50%;
- transition: transform 200ms, color 200ms;
- top: 20px;
- }
这个pointer-events
属性none
值能阻止点击、状态变化和鼠标指针变化。
一些需要注意的关于pointer-events的事项:
- 子元素可以声明
pointer-events
来解禁父元素的阻止鼠标事件限制。 - 如果你对一个元素设置了click事件监听器,然后你移除了
pointer-events
样式声明,或把它的值改变为auto
,监听器会重新生效。基本上,监听器会遵守pointer-events
的设定。
pointer-events
属性是用来禁止某元素的点击,这样的好处是样式上也得到了控制。当然,不要使用pointer-events
来屏蔽一些十分关键的触发动作,因为这个样式可以通过浏览器控制台删除掉。