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

原创 已于 2024-11-13 16:55:22 修改 · 1.5w 阅读 · 92
于 2021-09-30 09:30:40 首次发布
本文介绍了如何使用CSS的pointer-events属性来创建浮动label的登录效果。通过设置pointer-events:auto让事件穿透元素，结合input:focus的效果，实现了当用户点击input框时label浮起的交互。详细讲解了实现步骤和相关代码示例。

文章目录


学透CSS

前言

在这里插入图片描述

pointer-events

pointer-events属性设置 HTML 元素如何响应鼠标/触摸事件/单击/点击事件以及光标是否可见。
虽然pointer-events属性有11 个可能的值，但其中8个值都用于 SVG。任何 HTMl 元素的三个有效值是：

  • none 阻止指定 HTML 元素上的所有单击、状态和光标选项
  • auto 默认功能
  • inherit 将使用pointer-events元素的父元素的值

pointer-events:auto; 穿透元素！

允许单击或点击行为“穿过”一个元素到 Z 轴上它下面的另一个元素。

示例
标签
#css #html #html5
了解本专栏 订阅专栏 解锁全文
学透CSS-可浮动placeholder，让你的登录不再枯燥！
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
11-13 288
前言 在登录twitter的时候发现他的输入框的placeholder是可以浮动的。当输入框获取到焦点的时候，placeholder 会跑到上面去。我觉得这样的登录方式的好处是：可以减少一个label，同时往上浮动又可以保证用户在输入的时候知道输入什么内容。 pointer-events pointer-events属性设置 HTML 元素如何响应鼠标/触摸事件/单击/点击事件以及光标是否可见。 虽然pointer-events属性有11 个可能的值，但其中8个值都用于 SVG。任何 HTMl 元素的三个
CSS - 设置placeholder样式
热门推荐
weixin_45637293的博客
09-01 1万+
1.第一种最简单的写法：在谷歌浏览器中使用 textarea::placeholder { font-size: 12px; font-family: Arial; letter-spacing: 5px; color: #919191 !important; padding-left: 13px; padding-top: 9px; }
CSS：浏览器设置placeholder样式 / 微信小程序设置placeholder样式
snow的博客
11-24 7119
设置浏览器的placeholder样式在小程序中设置placeholder样式需要使用组件的内置属性。在上面的示例中，placeholder-style属性被设置为一个字符串，包含了CSS样式。在这个字符串中，您可以设置任何CSS样式属性，例如颜色、字体大小、字体样式等。请注意，这些属性仅适用于placeholder文本，而不是输入的文本。如果您需要设置输入文本的样式，应该将样式应用到输入框或文本域本身。
深入解析 CSS `::placeholder` 伪元素
2501_93104808的博客
10-10 545
CSS ::placeholder 伪元素用于样式化输入框的占位符文本，提升表单的视觉一致性和用户体验。它支持修改颜色、字体等文本样式，但受限于浏览器兼容性，需要添加厂商前缀（如-webkit-、-moz-）。最佳实践包括确保足够的颜色对比度、避免重要信息仅通过占位符展示，并注意动态性——占位符仅在输入框为空时显示。实际开发中应同时编写标准写法和带前缀的版本以保证兼容性。
CSS修改placeholder颜色的方法
u011884200的博客
06-30 7385
placeholder是一种输入提示，是指在输入框中出现的提示文字，它可以提示用户输入的内容，方便用户输入。
Web之Css的伪元素、样式、placeholder、selection、spelling、backdrop、grammar、letter、marker、target、first、line、cue
CSDN博客主页地址：https://mengjian.blog.csdn.net/
07-10 1531
Web之Css的伪元素、样式、placeholder、selection、spelling、backdrop、grammar、letter、marker、target、first、line、cue
学透CSS-可浮动placeholder，让你的登录不再枯燥
2401_83973995的博客
04-05 396
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
学透CSS-可浮动placeholder，让你的登录不再枯燥！，web开发交流
2401_84098018的博客
04-06 611
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
学透CSS-可浮动placeholder，让你的登录不再枯燥，2024年最新万分膜拜
m0_60635609的博客
04-20 405
给大家分享一些关于HTML的面试题。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
2024年前端最新学透CSS-可浮动placeholder，让你的登录不再枯燥！(1)，鬼知道我经历了啥
2401_84617681的博客
05-07 1108
计时器浏览器定位和导航浏览历史浏览器和屏幕信息对话框错误处理作为window对象属性的文档元素浮动label上面我们学习了pointer-events的用法。接着就回到正题，实现前言中的效果。
Web前端最新学透CSS-可浮动placeholder，让你的登录不再枯燥！，这些前端高级必会知识点你能答出来几个
2401_84619565的博客
05-09 917
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料请输入密码修改式样。
浮动的label
缘自世界
10-14 896
在web项目中，有一个很重的模块就是登陆/注册模块，这个模块的主体部分就是一个form表单，这个form表单包含两个重要input组（用户名/密码），每个input组都包含label和input，而关于 label+input 的布局方案多种多样，不同的设计师有不同的设计风格，不同的前端工程师又有不同的实现方式。通过对比发现，现在的方案是既注重美观，又注重性能。 那么，关于label和input都...
如何使用TextFieldEffects快速实现Hoshi浮动标签文本输入框效果
gitblog_00921的博客
03-04 674
TextFieldEffects是一个基于Swift开发的自定义UITextField效果库，它能帮助iOS开发者轻松实现各种精美的文本输入框动画效果。本文将详细介绍如何使用该库中的Hoshi效果，创建具有专业外观的浮动标签文本输入框，提升你的iOS应用用户界面体验。 ## Hoshi效果简介：什么是浮动标签文本输入框？ Hoshi效果是TextFieldEffects库提供的一种优雅的文本输
登录界面开发实战指南
vbnetcx的博客
12-08 318
本教程介绍了基础登录界面的开发要点，包含文本标签、输入框和提交按钮三大核心组件。详细解析了HTML表单代码，包括输入框类型(text/password)、属性设置(name/placeholder/required)和按钮功能。教程还提供了表单验证、记住密码功能和CSS美化建议，适用于企业内部系统、网站后台等场景开发。后续可扩展验证码、第三方登录等安全功能，并通过响应式设计优化移动端体验。
从placeholder到onfocus/onblur：深入解析HTML输入框提示文字的两种实现路径与实战优化
最新发布
weixin_30291791的博客
05-15 254
本文深入解析HTML输入框提示文字的两种实现方式：原生placeholder属性与JavaScript事件控制。对比两者的优缺点，包括兼容性、样式定制和交互灵活性，并提供实战优化技巧，帮助开发者根据项目需求选择最佳方案。特别探讨了placeholder与JS事件在移动端、无障碍访问和现代前端框架中的应用差异。
CSS3实现注册表单占位符动态特效设计与优化
weixin_36289742的博客
10-02 1118
属性的语法极为简单，直接作为布尔型字符串属性附加于支持的表单控件上：<input type="text" placeholder="请输入用户名"><textarea placeholder="请描述您的需求..."></textarea>当浏览器解析上述 HTML 代码时，会在对应的 DOM 节点中创建一个名为的属性节点，并将其值存储为字符串。可以通过 JavaScript 动态读取或修改：// 输出: "请输入用户名"input.placeholder = "新的提示信息";
评论 28
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

YOLO大师

你的打赏，我的动力

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

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

打赏作者

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

抵扣说明：

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

余额充值