CSS-placeholder-shown伪类实现输入框浮动文字效果

本文将使用:placeholder-shown伪类实现浮动问号标签效果，纯CSS实现。浮动文本标签我们在处理输入框的时候，会尽量给用户提供更好的体验。我们经常使用的标签属性有两个：标签标签是一个关联的表单元素，为描述信息提供最合适的元素。输入框的占位符属性允许您指定在没有输入时出现在元素内的文本。它用于显示示例文本，而不是解释或提示。这两个标签属性可以组合起来，创造出一种“浮动文本标签”的效果，具体是指：首先，用户看到一个带有占位符属性的输入标签，显示一些样题。label元素默认是隐藏的。当input输入框被激活开始输入内容时，label元素会悬浮在输入框上方。当输入框中有文本内容时，label元素会一直显示在输入框上方，用来标记用户输入的内容。纯CSS实现浮动标签文本注册焦点事件，判断输入是否有值，隐藏一个元素，根据输入框是否有内容决定是否显示该元素。这听起来像是一个JavaScript工作，对吧？并不真地！因为有一个CSS伪类：placeholder-shown可以达到上面的效果。MDN是这样解释这个伪类的：:placeholder-shownCSS伪类在占位符文本显示在或元素上时生效。换句话说，如果输入框中有任何值，我们可以假设不会触发:placeholder-shown伪类。下面是我使用这个伪类实现浮动标签的思路：构建HTML代码，通过相邻兄弟选择器选择input元素对应的label标签，将这两个元素包裹在一个div中。为输入、标签和::placeholder伪元素设置样式。将label元素定位在起始位置，并在div中垂直居中，然后将其隐藏。使用:not、:focus和:placeholder-shown的组合来决定何时显示标签：如果占位符文本消失，则显示标签—input:not(:placeholder-shown)+label；如果输入框获得焦点，占位符文本没有显示，则显示标签--input:focus:not(:placeholder-shown)+label接下来按照上面的思路完成HTML和CSS。HTML&CSSHTML的结构其实很简单，像这样：<divclass="Input"><inputtype="text"id="input"class="Input-text"placeholder="你的名字，例如Nicholas"><labelfor="input"class="Input-label">名字</label></div>CSS代码：.Input{/***容器的相对定位很重要，因为浮动标签元素的位置是相对于它计算的*/position:relative;}.Input-text{/***设置输入框的样式。字体大小和行高对于确定标签的精确定位非常重要*/display:block;保证金：0；宽度：100%；/***这些属性将由示例中的自定义属性一次性设置：**padding*font-size*line-height*/}.Input-text:focus{/***输入框时的样式getsfocus*/}.Input-label{/***label元素设置为绝对定位，并根据父元素和输入框计算其位置和移动距离*/display:block;位置：绝对；不透明度：0；/***这些属性将由示例中的自定义属性一次性设置：**bottom*left*font-size*line-height*transform*transform-origin*transition*/}.Input-text:placeholder-shown+.Input-label{/***当占位符文本可见时，标签将被隐藏*/visibility:hidden;z-index:-1;}.Input-text:not(:placeholder-shown)+.Input-label,.Input-text:focus:not(:placeholder-shown)+.Input-label{/***当占位符文本消失时，比如输入内容时，label元素会显示出来，悬浮在输入框上方*/visibility:visible;z-索引：1；不透明度：1；/***在示例中，这些属性将通过自定义属性的方式一次性设置**transform*transition*/}完整的演示效果您可以在下面的演示链接中看到完整的HTML和CSS代码：EffectlinkBrowser到目前为止，对浏览器的支持非常好，除了Edge。总结我希望你通过这篇文章学到了一些东西，并且你可以想出一些有趣的新方法来使用:placeholder伪类。再次感谢阅读！</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="JS实现信息滚动效果" href="/webqianduan/228949.html">JS实现信息滚动效果</a> </div> <div class="prev">下一篇：<a title="veeValidate实战" href="/webqianduan/228951.html">veeValidate实战</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>CSS-placeholder-shown伪类实现输入框浮动文字效果相关文章</code></div> <ul> <li><a href="/kejifunen/368019.html" target="_blank" title="2018年家电行业混合所有制改革首例，康佳如何实现两大目标？">2018年家电行业混合所有制改革首例，康佳如何实现两大目标？</a></li> <li><a href="/kejifunen/367798.html" target="_blank" title="用友云服务治理平台帮助企业实现微服务架构">用友云服务治理平台帮助企业实现微服务架构</a></li> <li><a href="/kejifunen/367622.html" target="_blank" title="索诺斯一号评测！所有智能音箱都忽略的一件事是，它实现了">索诺斯一号评测！所有智能音箱都忽略的一件事是，它实现了</a></li> <li><a href="/kejifunen/367505.html" target="_blank" title="可穿戴设备将成为中国智能产业实现“跨越式”发展的契机">可穿戴设备将成为中国智能产业实现“跨越式”发展的契机</a></li> <li><a href="/kejifunen/367239.html" target="_blank" title="芯片如何帮助手机充电器实现“更小体积、更快充电”？">芯片如何帮助手机充电器实现“更小体积、更快充电”？</a></li> <li><a href="/kejifunen/367179.html" target="_blank" title="未来5年 AR-VR头盔将实现六成复合增长率">未来5年 AR-VR头盔将实现六成复合增长率</a></li> <li><a href="/kejifunen/367023.html" target="_blank" title="格力电器上半年净利润超128亿元，自主研发空调芯片技术实现长">格力电器上半年净利润超128亿元，自主研发空调芯片技术实现长</a></li> <li><a href="/kejifunen/367019.html" target="_blank" title="联想Tech World 2018将推出智能体脂秤，实现SI">联想Tech World 2018将推出智能体脂秤，实现SI</a></li> <li><a href="/kejifunen/366616.html" target="_blank" title="SAKURA以黑科技为引擎，实现创新“加速”">SAKURA以黑科技为引擎，实现创新“加速”</a></li> <li><a href="/kejifunen/366407.html" target="_blank" title="浅谈可穿戴设备在保险行业的应用！实现产品数据">浅谈可穿戴设备在保险行业的应用！实现产品数据</a></li> <li><a href="/kejifunen/366080.html" target="_blank" title="神州云动：CRM帮助制造业实现千店精准管理">神州云动：CRM帮助制造业实现千店精准管理</a></li> <li><a href="/kejifunen/365933.html" target="_blank" title="精神控制真的要实现了吗？ BrainCo成为上海人工智能展网">精神控制真的要实现了吗？ BrainCo成为上海人工智能展网</a></li> <li><a href="/kejifunen/365655.html" target="_blank" title="国外高手改装HTC Vive手柄！实现手势控制">国外高手改装HTC Vive手柄！实现手势控制</a></li> <li><a href="/kejifunen/365653.html" target="_blank" title="犀牛云网络胜出！稳步提升排名，帮助企业实现全网营销">犀牛云网络胜出！稳步提升排名，帮助企业实现全网营销</a></li> <li><a href="/kejifunen/365512.html" target="_blank" title="春雨医生“吃螃蟹”！连接可穿戴设备实现远程会诊">春雨医生“吃螃蟹”！连接可穿戴设备实现远程会诊</a></li> <li><a href="/kejifunen/365506.html" target="_blank" title="如果VR出现在三国，刘备的梦想会实现吗？ ">如果VR出现在三国，刘备的梦想会实现吗？ </a></li> <li><a href="/kejifunen/365056.html" target="_blank" title="滨松微型μPMT实现医疗器械“健康瘦身”梦想">滨松微型μPMT实现医疗器械“健康瘦身”梦想</a></li> <li><a href="/kejifunen/365022.html" target="_blank" title="微软最新专利！智能音箱如何实现更好的交互">微软最新专利！智能音箱如何实现更好的交互</a></li> <li><a href="/kejifunen/364967.html" target="_blank" title="智能厨房的概念终于实现了，为什么长虹率先推广呢？ ">智能厨房的概念终于实现了，为什么长虹率先推广呢？ </a></li> <li><a href="/kejifunen/364800.html" target="_blank" title="咕咚固件升级ROM1.0！更多功能通过刷机即可实现">咕咚固件升级ROM1.0！更多功能通过刷机即可实现</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/371234.html" title="三星 Gear VR 将实现手部追踪 " target="_blank">三星 Gear VR 将实现手部追踪 </a></li> <li><em>2</em><a href="/kejifunen/371206.html" title="小米众筹推出HiPee智能健康精灵设备，实现14项检测" target="_blank">小米众筹推出HiPee智能健康精灵设备，实现14项检测</a></li> <li><em>3</em><a href="/kejifunen/371151.html" title="智能手表黑科技！可实现手势控制" target="_blank">智能手表黑科技！可实现手势控制</a></li> <li><em>4</em><a href="/kejifunen/371037.html" title="方太2018年度新闻发布会隆重召开，实现产品与文化共振发展" target="_blank">方太2018年度新闻发布会隆重召开，实现产品与文化共振发展</a></li> <li><em>5</em><a href="/kejifunen/370764.html" title="可穿戴设备如何让职业运动员实现比赛与健康双赢？ " target="_blank">可穿戴设备如何让职业运动员实现比赛与健康双赢？ </a></li> <li><em>6</em><a href="/kejifunen/370736.html" title="微软、谷歌和苹果都是同质的！技术会实现大统一吗？ " target="_blank">微软、谷歌和苹果都是同质的！技术会实现大统一吗？ </a></li> <li><em>7</em><a href="/kejifunen/370593.html" title="浅析VR现状！概念很受欢迎，但内容很难实现" target="_blank">浅析VR现状！概念很受欢迎，但内容很难实现</a></li> <li><em>8</em><a href="/kejifunen/370498.html" title="详细讲解语音控制智能家居系统的实现流程和技术" target="_blank">详细讲解语音控制智能家居系统的实现流程和技术</a></li> <li><em>9</em><a href="/kejifunen/370464.html" title="曲面电视的增长正在下降，如何实现逆袭" target="_blank">曲面电视的增长正在下降，如何实现逆袭</a></li> <li><em>10</em><a href="/kejifunen/370430.html" title="这么多厂商做手势识别，uSens如何实现产品差异化" target="_blank">这么多厂商做手势识别，uSens如何实现产品差异化</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/370233.html" title="榨汁机实现品质和奢华，了解如何一步步选择榨汁机？ " target="_blank">榨汁机实现品质和奢华，了解如何一步步选择榨汁机？ </a></li> <li><em>2</em><a href="/kejifunen/370192.html" title="可穿戴健身追踪器假日销售量实现飞跃" target="_blank">可穿戴健身追踪器假日销售量实现飞跃</a></li> <li><em>3</em><a href="/kejifunen/370097.html" title="丰田黑科技实现盲人驾驶梦想" target="_blank">丰田黑科技实现盲人驾驶梦想</a></li> <li><em>4</em><a href="/kejifunen/370013.html" title="VAVA宠物机器人来了，实现远程互动、自动喂食" target="_blank">VAVA宠物机器人来了，实现远程互动、自动喂食</a></li> <li><em>5</em><a href="/kejifunen/369850.html" title="搜狗文档翻译实现重要升级，支持日韩文档免费即时翻译" target="_blank">搜狗文档翻译实现重要升级，支持日韩文档免费即时翻译</a></li> <li><em>6</em><a href="/kejifunen/369752.html" title="O2O进入“下半场”，百度会利用AI实现弯道超车吗？ " target="_blank">O2O进入“下半场”，百度会利用AI实现弯道超车吗？ </a></li> <li><em>7</em><a href="/kejifunen/369750.html" title="融云小程序解决方案！业内率先实现商业落地" target="_blank">融云小程序解决方案！业内率先实现商业落地</a></li> <li><em>8</em><a href="/kejifunen/369647.html" title="极客智能家居！人口变化和现实环境需求将加速智能交通的实现" target="_blank">极客智能家居！人口变化和现实环境需求将加速智能交通的实现</a></li> <li><em>9</em><a href="/kejifunen/369609.html" title="要实现智能监控，首先要做好大数据存储" target="_blank">要实现智能监控，首先要做好大数据存储</a></li> <li><em>10</em><a href="/kejifunen/369394.html" title="长江商学院！从制造到智造，如何实现技术与商业结合？" target="_blank">长江商学院！从制造到智造，如何实现技术与商业结合？</a></li> <li><em>11</em><a href="/kejifunen/369126.html" title="设计和生产可穿戴设备不是你想想就能实现的" target="_blank">设计和生产可穿戴设备不是你想想就能实现的</a></li> <li><em>12</em><a href="/kejifunen/369074.html" title="董明珠！格力空调将使用自家芯片，希望实现员工持股" target="_blank">董明珠！格力空调将使用自家芯片，希望实现员工持股</a></li> <li><em>13</em><a href="/kejifunen/368997.html" title="后Fitbit时代，中国可穿戴企业上市梦何时实现？ " target="_blank">后Fitbit时代，中国可穿戴企业上市梦何时实现？ </a></li> <li><em>14</em><a href="/kejifunen/368832.html" title="让运维更智慧 以AI方式实现业务智能化运维" target="_blank">让运维更智慧 以AI方式实现业务智能化运维</a></li> <li><em>15</em><a href="/kejifunen/368564.html" title="观看 TA 的心跳 微软利用 HoloLens 实现远程生理" target="_blank">观看 TA 的心跳 微软利用 HoloLens 实现远程生理</a></li> <li><em>16</em><a href="/kejifunen/368449.html" title="VR能否帮助HTC实现逆袭？ " target="_blank">VR能否帮助HTC实现逆袭？ </a></li> <li><em>17</em><a href="/kejifunen/368428.html" title="无人机农业距离实现成果还有多远？极飞推出植保机-培训-金融等" target="_blank">无人机农业距离实现成果还有多远？极飞推出植保机-培训-金融等</a></li> <li><em>18</em><a href="/kejifunen/368406.html" title="450万的目标如何实现？看TCL洗冰机的“三大战役”" target="_blank">450万的目标如何实现？看TCL洗冰机的“三大战役”</a></li> <li><em>19</em><a href="/kejifunen/368358.html" title="虚拟现实版的互联网可能永远无法实现" target="_blank">虚拟现实版的互联网可能永远无法实现</a></li> <li><em>20</em><a href="/kejifunen/368333.html" title="迪拜到2030年将实现25%自动驾驶" target="_blank">迪拜到2030年将实现25%自动驾驶</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </body> </html>