可浮动placeholder，让你的登录不再枯燥

已于 2022-05-13 14:16:43 修改
阅读量1.5w 收藏 92
点赞数 85
文章标签： css html html5
于 2021-09-30 09:30:40 首次发布
原创文章，禁止任何形式转载！
本文链接：https://blog.csdn.net/shangyanaf/article/details/120560656
版权
学透CSS 专栏收录该内容
56 篇文章 13 订阅 ¥99.90 ¥299.90
订阅专栏
本文介绍了如何使用CSS的pointer-events属性来创建浮动label的登录效果。通过设置pointer-events:auto让事件穿透元素，结合input:focus的效果，实现了当用户点击input框时label浮起的交互。详细讲解了实现步骤和相关代码示例。
摘要由CSDN通过智能技术生成

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

原文链接 ==>http://sylblog.xin/archives/69

前言

在这里插入图片描述

pointer-events

pointer-events属性设置 HTML 元素如何响应鼠标/触摸事件/单击/点击事件以及光标是否可见。

了解本专栏 订阅专栏 解锁全文
YOLO大师
关注
专栏目录
订阅专栏
纯css实现输入框placeholder动效及输入校验
11-21
更多精彩内容请关注 https://github.com/abc-club/free-resources 背景 话不多说，我们能否用纯css实现以下效果: 答案是肯定的。 借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现 :placeholder-shown伪类目前兼容性如下： :placeholder-shown兼容性 直接上代码！:smiling_face_selector: 源码 html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="vi
css设置input框长度_web前端入门到实战：CSS :placeholder-shown伪类实现输入框浮动文字效果...
weixin_39637363的博客
11-25 248
在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。浮动的文字标签当我们处理输入框时，会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的：label标签是关联表单元素，提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在<input>元素内的文本。它用于显示示例文字，而不是解释...
HTML案例登录页面
weixin_67464822的博客
06-14 7801
本人是菜鸟，刚入前端坑 想记录一下自己写过的页面，也希望能帮到跟我一样的你，加油鸭~~~简单的登录页面
CSS3表单文本框输入文字提示上浮特效
06-11
CSS3表单文本框输入文字提示上浮特效，一款基于placeholder属性制作表单输入框交互式特效。
HTML CSS Javascript完成浮动登录窗口和窗口移动
CHINAonlyQiu的专栏
01-24 387
【源码下载】（百度网盘） 【源码下载】（爱问知识人） &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org...
CSS使用placeholder-shown伪类实现输入框浮动文字效果
11-21
本文将详细讲解如何利用`:placeholder-shown`伪类来实现一种被称为“浮动文字标签”或“浮动标签”的交互效果，使得标签在用户输入时动态地展示和隐藏，从而增强表单的可用性和美观性。 ### 1. `label`标签和`...
HTML5浮动-制作京东登录页面
08-29
另外，为了提高页面的可访问性，应遵循WCAG（Web Content Accessibility Guidelines）标准，例如添加alt属性给图片，为表单元素添加label，确保屏幕阅读器能正确读取和理解页面内容。 最后，别忘了添加JavaScript来...
CSS3浮动占位符登录框按钮发光特效
07-24
这种特效不仅提升了页面的美观度，还能提高用户体验，让用户更容易理解和操作登录流程。在实际项目中，可以按需调整颜色、大小等参数，以适应不同的设计风格。在压缩包文件"jiaoben8298"中，可能包含了实现这个特效...
登录表单兼容placeholder的方法
11-14
此外，你还可以使用现有的前端库和插件，如jQuery Placeholder或Modernizr，它们提供了更完善的跨浏览器解决方案，可以自动检测浏览器对`placeholder`的支持情况，并提供相应的polyfill。 总之，为确保登录表单的`...
css+js框浮动效果
06-11
使用css+js实现简单的浮动位移动画
WEB前端登录注册页面的form中使用placeholder占位符
weixin_40165325的博客
01-17 1627
在web的开发中有的时候我们需要用户登录注册页面 需要在输入框的里面有灰色字体进行提示 我之前都是使用复杂的JavaScript来实现 实现点击出现字符出现与消失 以及字符的颜色在灰色和黑色中变换 特别是密码输入框中需要涉及到两个输入框的显示与隐藏 非常麻烦 但是使用了placeholder占位符就不一样了 可以方便快捷的实现这个功能示例代码：<body> <div
iOS textField placeholder 信息上浮
weixin_30339969的博客
06-05 140
textField placeholder 提示信息上浮 当输入框 有文的时候 placeholder 信息就浮动到左上角。 只要继承就行，使用非常简单。 tintFloatField 代码调用非常简单 #import "RPFloatingPlaceholderTextField.h" #import "RPFloatingPlaceholderTextView....
关于css3中transition动画实现input输入框特效的总结（项目总结）
时清云的博客
08-24 5008
最近在项目中，产品经理要求实现input框的一种特效，由于这个页面是用vue写的，所以就在github上找有vue有关这方面的组件，结果引入之后就出现了很多问题，首先这个vue项目用的ui框架是饿了吗开发的Mint UI，里面没有这种效果，然后又借鉴了一下vonic这个ui框架，但是引入的时候有些不兼容。无奈之下就自己写了一下这个特效，顺便又学习了一下动画效果。...
CSS实现一个好看的登录框
SAKURE2210866448的博客
02-29 8598
写了一个自己很喜欢的登录框，话不多说先上图。 代码很简单，给大家参考???????????? 目录结构： 这里给大家推荐一个好用的图标库????Font Awesome html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte...
css+js框浮动位移效果
小镔
06-11 1987
cssjs框浮动位移效果 要实现的效果 咯这个样儿就是要搞整起来的目标看下面看下面好像有点像是电影的宣传一样 _ 先来一个小框框 哈哈就是使用一个div包裹 然后加上其他元素 头图 标题和价格 最后加上box下面的 go 块儿和hover效果 go 加加加 tezhan 的hover 针对go进行js强化 分块儿链接设置 使用localtion 使用jsinput属性 使用ajax异步加载数据啷个
css动画效果代码案例_CSS :placeholder-shown伪类实现Material Design占位符交互效果
weixin_39661345的博客
11-27 289
Material Design规范中占位符交互效果Material Design风格占位符交互效果官方示意见此demo页面。效果可以参见下面的GIF录屏示意：示意现在这种设计在移动端很常见，因为宽度是稀缺的。相信不少人设计项目中有实现过这种交互，而且，我敢保证是利用JS实现的。实际上，我们可以借助CSS :placeholder-shown伪类，纯CSS，无任何JS，实现这样的占位符交互效果。:p...
jsp怎么设置页面背景
热门推荐
不二的博客
08-26 6万+
在日常jsp开发中经常要用到背景的设置，而在背景的设置也有多种多样，接下来小编将为你讲解常用的jsp页面背景设置。本项目百度网盘共享地址： http://pan.baidu.com/s/1c6BaFk 首先当然是配置eclipse开发环境（我测试的时候开发环境为：jdk1.7+tomcat7+eclipse kepler。 建Dynamic web project项目（myeclipse...
简单方法让input date支持placeholder
最新发布
06-03
然后，我们可以使用以下代码来判断浏览器是否支持input标签的placeholder属性： ``` if (!('placeholder' in document.createElement('input'))) { // 浏览器不支持placeholder属性，需要使用JavaScript来实现 } `...
评论 28
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YOLO大师

你的打赏，我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值