web前端入门到实战：CSS :placeholder-shown伪类实现输入框浮动文字效果

作者: 图恩分类: 编程开发阅读: 764发布时间： 2020-04-12 19:54:46

在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。浮动的文字标签当我们处理输入框时，会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的： label标签是关联表单元素，提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在元素内的文本。它用于显示示例文字，而不是解释或提示。这两个标签属性可以组合起来创建“浮动文字标签”的效果，这种效果具体指的是：首先，用户看到一个带有placeholder属性的input标签，显示了一些示例性质的问题。label元素默认是隐藏的。当input输入框被激活并开始输入内容时，label元素会浮动显示在输入框的上方。当输入框内有文字内容时，label元素就一直保持显示在输入框的上方，用于标示用户输入的内容。纯CSS实现浮动的标签文字注册focus事件，判断是否输入有值，隐藏一个元素，并根据输入框是否有内容来决定是否显示这个元素。这听起来像是JavaScript的工作，对吗？并不是的！因为有一个CSS伪类:placeholder-shown可以实现上述的效果。MDN中是这样解释这个伪类的： :placeholder-shown CSS 伪类在或

元素显示 placeholder text
时生效。
换句话说，如果输入框中有任何值，我们都可以认为:placeholder-shown伪类不会被触发。
下面是我使用这个伪类来实现浮动标签的思路：
构建HTML代码，通过相邻兄弟选择器就可以选择input元素所对应的label标签，并将这两个元素包裹在一个div中。
设置input，label以及::placeholder伪元素的样式。
将label元素放置在起始位置，并在div中垂直居中，然后隐藏它。
通过:not, :focus和:placeholder-shown伪类的组合决定什么时候显示label标签：如果placeholder text消失了，则显示label — input:not(:placeholder-shown) + label；如果输入框获取到了焦点，并且没有显示placeholder text，则显示label — input:focus:not(:placeholder-shown) + label
下面就按照上面的思路来完成HTML与CSS。
HTML & CSS
HTML的结构实际上非常简单，就像这样：
<div class="Input">
  <input type="text" id="input" class="Input-text" placeholder="Your first name, e.g. Nicholas">
  <label for="input" class="Input-label">First name</label>
</div>
CSS代码：
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.Input {
  /**
   * 容器的相对定位很重要, 因为label元素的浮动位置是相对于它计算的
   */
  position: relative;
}
.Input-text {
  /**
   * 设置输入框的样式。 字体大小和行高对于确定标签的精确定位非常重要
   */
  display: block;
  margin: 0;
  width: 100%;
  /**
   * 这些属性在示例中会通过自定义属性的方式一次性设置：
   *
   * padding
   * font-size
   * line-height
   */
}
.Input-text:focus {
  /**
   * 输入框获取焦点时的样式
   */
}
.Input-label {
  /**
   * label元素设置为绝对定位，并根据父元素和输入框计算出它的位置与移动距离
   */
  display: block;
  position: absolute;
  opacity: 0;
  /**
   * 这些属性在示例中会通过自定义属性的方式一次性设置：
   *
   * bottom
   * left
   * font-size
   * line-height
   * transform
   * transform-origin
   * transition
   */
}
.Input-text:placeholder-shown + .Input-label {
  /**
   * 当占位文字可见时，会隐藏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-index: 1;
  opacity: 1;
  /**
   * 这些属性在示例中会通过自定义属性的方式一次性设置
   *
   * transform
   * transition
   */
}
完整的演示效果
浏览器支持
到目前为止，浏览器支持度还不错，除了Edge。
总结
我希望你通过这篇文章学到了一些东西，你还可以想出一些使用:placeholder伪类有趣的新方法。再次感谢您的阅读！
<p style='opacity:0'><a href='https://www.dsiab.com' style='cursor:unset'>本文章由javascript技术分享原创和收集</a></p></div></div><div class="post-footer" data-v-e0d09ea0><div class="copy-desc" data-v-e0d09ea0><div data-v-e0d09ea0>本文由作者创作或收集，内容引用如有问题请联系站长处理。</div><div data-v-e0d09ea0> 转载请注明原文及出处：<a class="quote" href="https://www.dsiab.com/post/dbabbc59-ca85-490a-897a-3ed050e212e3" data-v-e0d09ea0>web前端入门到实战：CSS :placeholder-shown伪类实现输入框浮动文字效果</a></div></div></div><div class="postRecommend" style="display:none;" data-v-e0d09ea0><div class="common-title" data-v-a72f5a0e>推荐阅读 <i class="active-line" data-v-a72f5a0e></i></div><ul></ul></div><div class="comments" data-v-e0d09ea0 data-v-f2b74ff7><div class="add-comment" data-v-f2b74ff7><h3 data-v-f2b74ff7>发表评论<span style="color:gray;font-size:1rem;" data-v-f2b74ff7> (审核通过后显示评论)：</span></h3></div><div class="commentsList" style="display:none;" data-v-f2b74ff7><h3 style="text-align:center;" data-v-f2b74ff7>文章评论(0)</h3></div></div></div></div></div><div id="imageList" style="position:absolute;top:9999px;left:-9999px;" data-v-e0d09ea0></div></div><div class="side-bar layouts-sideBar" data-v-5fb8840b data-v-e86ddcfe><ul data-v-e86ddcfe><li data-v-e86ddcfe><div class="search" data-v-e86ddcfe></div></li><li data-v-e86ddcfe><div class="_oi1z2s14bx" data-v-e86ddcfe></div></li><div class="_clzacg58dkb" data-v-e86ddcfe></div><li data-v-e86ddcfe><div class="module category" data-v-e86ddcfe><div class="common-title" data-v-e86ddcfe data-v-a72f5a0e>专题推荐 <i class="active-line" data-v-a72f5a0e></i></div></div></li><li data-v-e86ddcfe><div class="module" data-v-e86ddcfe><div class="common-title" data-v-e86ddcfe data-v-a72f5a0e>推荐阅读 <i class="active-line" data-v-a72f5a0e></i></div><ul data-v-e86ddcfe><li class="li-item" data-v-e86ddcfe><div class="title" data-v-e86ddcfe><a href="/post/cd692623-db46-4a98-b015-328d96ba6cf3" target="_self" data-v-e86ddcfe><span class="list-index" data-v-e86ddcfe>1</span>重走三洲田</a></div><div class="excerpt" data-v-e86ddcfe><span class="views" data-v-e86ddcfe> 阅读：137</span><span class="views published-date" data-v-e86ddcfe> 发布时间：2024-10-20 22:45:39</span></div></li><li class="li-item" data-v-e86ddcfe><div class="title" data-v-e86ddcfe><a href="/post/7ba47b22-f60e-4a4b-8b55-30cdc8d6e95e" target="_self" data-v-e86ddcfe><span class="list-index" data-v-e86ddcfe>2</span>老爸跟小叔来玩了一个星期</a></div><div class="excerpt" data-v-e86ddcfe><span class="views" data-v-e86ddcfe> 阅读：22</span><span class="views published-date" data-v-e86ddcfe> 发布时间：2024-11-13 21:54:58</span></div></li></ul></div></li></ul></div></div><div class="home-footer" data-v-5fb8840b><div class="site-info"><div><a href="https://nuxt.com/">© 基于nuxt</a></div><div><a href="https://beian.miit.gov.cn/">粤ICP备20013202号</a></div><div><a href="/">© 2020-2024 javascript技术分享</a></div></div></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true">[["Reactive",1],{"data":2,"state":460,"_errors":461,"serverRendered":470,"path":471},{"06PyIpggrg":3,"574zKRyEAZ":14,"IDsRz2IOoy":35,"g3oVWSWIeZ":437,"7OKgyDxXq6":450,"cGC9GjXW5a":20},{"code":4,"msg":5,"data":6},0,"操作成功",{"menuList":7,"siteUrl":8,"beianNo":9,"carouselUrl":10,"siteName":11,"carouselEnable":12,"siteDesc":13},"[{\"menuName\":\"首页\",\"menuUrl\":\"/\",\"enabled\":\"Y\",\"imgUrl\":\"首页\",\"desc\":\"/\"},{\"menuName\":\"网站导航\",\"menuUrl\":\"/nav\",\"enabled\":\"Y\",\"imgUrl\":\"网站导航\",\"desc\":\"/nav\"},{\"menuName\":\"关于\",\"menuUrl\":\"/post/13\",\"enabled\":\"Y\",\"imgUrl\":\"关于\",\"desc\":\"/post/13\"},{\"menuName\":\"升级日志\",\"menuUrl\":\"https://gitee.com/wilkwo/nuxt-web-plus/releases\",\"enabled\":\"Y\",\"imgUrl\":\"更新日志\",\"desc\":\"https://gitee.com/wilkwo/nuxt-web-plus/releases\"},{\"menuName\":\"优乐购\",\"menuUrl\":\"/tbk\",\"enabled\":\"N\"},{\"menuName\":\"w3c教程\",\"menuUrl\":\"https://source.dsiab.com/course/w3c\",\"enabled\":\"N\"},{\"menuName\":\"react教程\",\"menuUrl\":\"https://source.dsiab.com/course/react/react.docschina.org/index.html\",\"enabled\":\"N\"},{\"menuName\":\"mysql教程\",\"menuUrl\":\"https://source.dsiab.com/course/mysql/\",\"enabled\":\"N\"},{\"menuName\":\"AI助手\",\"menuUrl\":\"http://qw.dsiab.com/chat/share?shareId=ozvf9ai2r0juxiv0tyw6onal\",\"enabled\":\"N\"},{\"menuName\":\"AI绘画\",\"menuUrl\":\"http://sd.dsiab.com\",\"enabled\":\"N\"}]","https://www.dsiab.com","粤ICP备20013202号","[{\"imgUrl\":\"https://source.dsiab.com/upload/0913ca3e-fb3c-4120-98fe-62bd86cf9b42.jpeg\",\"desc\":\"如何通过pm2部署nuxt3应用？\",\"url\":\"https://www.dsiab.com/post/d435197f-f03f-481b-9c4a-f33d2875d317\"},{\"imgUrl\":\"https://source.dsiab.com/upload/cf172b78-9a2b-4ed3-8ae8-18ecaf612d98.jpg\",\"desc\":\"scrollIntoView 方法不生效如何解决\",\"url\":\"https://www.dsiab.com/post/c8df67f1-c2da-4b27-8659-1cb8ef1bd28d\"},{\"imgUrl\":\"https://source.dsiab.com/upload/cf172b78-9a2b-4ed3-8ae8-18ecaf612d98.jpg\",\"desc\":\"在Vue项目中引入tinymce富文本编辑器\",\"url\":\"https://www.dsiab.com/post/6c7ebba5-2b95-4ef4-baf6-2a8479746432\"},{\"imgUrl\":\"https://source.dsiab.com/upload/cf172b78-9a2b-4ed3-8ae8-18ecaf612d98.jpg\",\"desc\":\"宝塔面板如何部署nuxt项目\",\"url\":\"https://www.dsiab.com/post/3501\"}]","javascript技术分享","N","2020-2023 javascript技术分享",{"code":4,"msg":5,"data":15},{"result":16},[17,23,27,31],{"id":18,"name":19,"postId":20,"valid":21,"topicId":20,"createDate":22},9,"从零搭建博客",null,"1","2023-05-29 00:08:30",{"id":24,"name":25,"postId":20,"valid":21,"topicId":20,"createDate":26},8,"前端开发","2022-10-29 18:53:22",{"id":28,"name":29,"postId":20,"valid":21,"topicId":20,"createDate":30},4,"javascript教程","2022-03-02 17:32:45",{"id":32,"name":33,"postId":20,"valid":21,"topicId":20,"createDate":34},1,"vue3+ts教程","2022-03-01 22:35:34",{"code":4,"msg":5,"data":36},{"result":37},[38,42,45,48,51,54,56,59,62,65,68,71,74,77,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,203,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349,353,357,361,365,369,373,377,381,385,389,393,398,401,405,409,413,417,421,425,429,433],{"id":32,"name":39,"valid":32,"createdBy":40,"createDate":41},"未分类","admin","2022-01-20 23:26:35",{"id":43,"name":44,"valid":32,"createdBy":40,"createDate":41},2,"前端面试",{"id":46,"name":47,"valid":32,"createdBy":40,"createDate":41},3,"开发笔记",{"id":49,"name":50,"valid":32,"createdBy":40,"createDate":41},5,"生活笔记",{"id":52,"name":53,"valid":32,"createdBy":40,"createDate":41},7,"编程开发",{"id":24,"name":55,"valid":32,"createdBy":40,"createDate":41},"网络资讯",{"id":57,"name":58,"valid":32,"createdBy":40,"createDate":41},103,"育儿心得",{"id":60,"name":61,"valid":32,"createdBy":40,"createDate":41},111,"佳句精选",{"id":63,"name":64,"valid":32,"createdBy":40,"createDate":41},120,"资源分享",{"id":66,"name":67,"valid":32,"createdBy":40,"createDate":41},122,"教育考试",{"id":69,"name":70,"valid":32,"createdBy":40,"createDate":41},123,"开发教程",{"id":72,"name":73,"valid":32,"createdBy":40,"createDate":41},126,"大事记",{"id":75,"name":76,"valid":32,"createdBy":40,"createDate":41},137,"诗词鉴赏",{"id":78,"name":79,"valid":32,"createdBy":40,"createDate":41},140,"成长记录",{"id":81,"name":39,"valid":32,"createdBy":82,"createDate":83},151,"admin11","2022-08-24 22:26:29",{"id":85,"name":39,"valid":32,"createdBy":86,"createDate":87},155,"1111","2022-08-24 22:45:04",{"id":89,"name":90,"valid":32,"createdBy":86,"createDate":91},156,"123","2022-08-24 22:45:20",{"id":93,"name":39,"valid":32,"createdBy":94,"createDate":95},157,"admin111","2022-08-26 10:48:31",{"id":97,"name":98,"valid":32,"createdBy":40,"createDate":99},160,"网络文学","2022-08-27 21:27:36",{"id":101,"name":39,"valid":32,"createdBy":102,"createDate":103},161,"aasun","2022-08-30 16:16:01",{"id":105,"name":39,"valid":32,"createdBy":106,"createDate":107},162,"fadf","2022-09-04 13:23:58",{"id":109,"name":110,"valid":32,"createdBy":40,"createDate":111},168,"家乡动态","2022-09-13 22:33:10",{"id":113,"name":39,"valid":32,"createdBy":114,"createDate":115},169,"cbyniyga","2022-09-14 11:23:03",{"id":117,"name":39,"valid":32,"createdBy":118,"createDate":119},170,"masks","2022-09-14 13:24:23",{"id":121,"name":39,"valid":32,"createdBy":122,"createDate":123},171,"123123","2022-09-14 19:29:18",{"id":125,"name":39,"valid":32,"createdBy":126,"createDate":127},172,"qwer","2022-09-15 14:35:09",{"id":129,"name":39,"valid":32,"createdBy":130,"createDate":131},173,"qwer1123","2022-09-16 20:16:47",{"id":133,"name":39,"valid":32,"createdBy":134,"createDate":135},174,"aaaa","2022-09-21 10:25:36",{"id":137,"name":39,"valid":32,"createdBy":138,"createDate":139},175,"arthur","2022-09-29 15:46:20",{"id":141,"name":39,"valid":32,"createdBy":142,"createDate":143},180,"jiangmeng","2022-10-19 09:49:28",{"id":145,"name":39,"valid":32,"createdBy":146,"createDate":147},183,"test1","2022-10-27 13:32:49",{"id":149,"name":39,"valid":32,"createdBy":150,"createDate":151},184,"flower","2022-11-02 23:46:28",{"id":153,"name":39,"valid":32,"createdBy":154,"createDate":155},185,"test12","2022-11-21 17:13:44",{"id":157,"name":39,"valid":32,"createdBy":158,"createDate":159},186,"1111111","2022-11-21 22:40:22",{"id":161,"name":39,"valid":32,"createdBy":162,"createDate":163},187,"123456","2022-11-21 22:40:55",{"id":165,"name":39,"valid":32,"createdBy":166,"createDate":167},188,"23423","2022-11-26 16:07:57",{"id":169,"name":39,"valid":32,"createdBy":170,"createDate":171},189,"adlfll","2022-11-26 16:09:56",{"id":173,"name":39,"valid":32,"createdBy":174,"createDate":175},190,"adsf","2022-11-26 16:13:00",{"id":177,"name":39,"valid":32,"createdBy":178,"createDate":179},191,"test111","2022-11-26 16:14:12",{"id":181,"name":39,"valid":32,"createdBy":182,"createDate":183},193,"u1223","2022-12-02 08:37:06",{"id":185,"name":39,"valid":32,"createdBy":186,"createDate":187},195,"ferromagnetic","2022-12-15 15:54:46",{"id":189,"name":39,"valid":32,"createdBy":190,"createDate":191},196,"23444","2022-12-28 15:37:38",{"id":193,"name":39,"valid":32,"createdBy":194,"createDate":195},198,"wer234","2023-02-03 22:56:03",{"id":197,"name":39,"valid":32,"createdBy":198,"createDate":199},199,"234234","2023-02-03 22:57:12",{"id":201,"name":39,"valid":32,"createdBy":166,"createDate":202},200,"2023-02-03 22:57:30",{"id":204,"name":39,"valid":32,"createdBy":82,"createDate":205},201,"2023-02-13 21:11:11",{"id":207,"name":208,"valid":32,"createdBy":40,"createDate":209},202,"光影分享","2023-02-16 23:00:38",{"id":211,"name":212,"valid":32,"createdBy":40,"createDate":213},203,"佳文收藏","2023-03-04 20:45:25",{"id":215,"name":216,"valid":32,"createdBy":40,"createDate":217},205,"其他","2023-04-19 23:08:33",{"id":219,"name":39,"valid":32,"createdBy":220,"createDate":221},206,"234234234","2023-05-18 22:01:00",{"id":223,"name":39,"valid":32,"createdBy":224,"createDate":225},207,"admin33","2023-05-18 22:02:38",{"id":227,"name":39,"valid":32,"createdBy":228,"createDate":229},208,"admin333333","2023-05-18 22:05:03",{"id":231,"name":39,"valid":32,"createdBy":232,"createDate":233},209,"adminvvvvvv","2023-05-18 22:08:50",{"id":235,"name":39,"valid":32,"createdBy":236,"createDate":237},210,"23fewfwefvv","2023-05-18 22:14:13",{"id":239,"name":39,"valid":32,"createdBy":240,"createDate":241},211,"233fwefwe","2023-05-18 22:15:30",{"id":243,"name":39,"valid":32,"createdBy":244,"createDate":245},212,"adfasdfasdf","2023-05-18 22:41:49",{"id":247,"name":39,"valid":32,"createdBy":248,"createDate":249},213,"23423eeee","2023-05-18 22:44:12",{"id":251,"name":39,"valid":32,"createdBy":252,"createDate":253},214,"erwdfzxc","2023-05-18 22:47:18",{"id":255,"name":39,"valid":32,"createdBy":256,"createDate":257},215,"夏季男女对表","2023-05-23 15:24:02",{"id":259,"name":39,"valid":32,"createdBy":260,"createDate":261},219,"zhl77","2023-06-18 16:57:27",{"id":263,"name":39,"valid":32,"createdBy":264,"createDate":265},220,"admin123456","2023-06-26 16:56:23",{"id":267,"name":39,"valid":32,"createdBy":268,"createDate":269},222,"youyou","2023-08-10 17:07:19",{"id":271,"name":39,"valid":32,"createdBy":86,"createDate":272},223,"2023-08-17 11:24:23",{"id":274,"name":39,"valid":32,"createdBy":275,"createDate":276},224,"809630306","2023-08-19 13:01:41",{"id":278,"name":39,"valid":32,"createdBy":279,"createDate":280},225,"test333","2023-08-19 15:18:40",{"id":282,"name":39,"valid":32,"createdBy":283,"createDate":284},226,"demo","2023-08-21 15:28:44",{"id":286,"name":39,"valid":32,"createdBy":287,"createDate":288},227,"1234569","2023-08-28 10:58:32",{"id":290,"name":39,"valid":32,"createdBy":291,"createDate":292},228,"qqqq","2023-09-18 17:50:40",{"id":294,"name":39,"valid":32,"createdBy":295,"createDate":296},229,"test123","2023-09-20 11:23:40",{"id":298,"name":39,"valid":32,"createdBy":299,"createDate":300},231,"zmx123","2023-10-02 16:03:50",{"id":302,"name":39,"valid":32,"createdBy":303,"createDate":304},232,"yinquan","2023-10-10 11:58:33",{"id":306,"name":39,"valid":32,"createdBy":307,"createDate":308},233,"1354541","2023-10-10 14:35:53",{"id":310,"name":39,"valid":32,"createdBy":311,"createDate":312},234,"","2023-10-23 21:09:51",{"id":314,"name":39,"valid":32,"createdBy":315,"createDate":316},235,"asdf","2023-10-23 21:10:26",{"id":318,"name":39,"valid":32,"createdBy":319,"createDate":320},236,"imwujianhao@163.com","2023-10-24 10:24:32",{"id":322,"name":39,"valid":32,"createdBy":323,"createDate":324},237,"ls123456","2023-10-26 21:59:55",{"id":326,"name":39,"valid":32,"createdBy":327,"createDate":328},238,"18165042571","2023-11-06 11:05:45",{"id":330,"name":39,"valid":32,"createdBy":331,"createDate":332},239,"gsoft","2023-11-18 07:44:43",{"id":334,"name":39,"valid":32,"createdBy":335,"createDate":336},240,"tststs","2023-12-10 20:53:50",{"id":338,"name":39,"valid":32,"createdBy":339,"createDate":340},241,"骑牛上班","2023-12-27 14:20:26",{"id":342,"name":343,"valid":32,"createdBy":40,"createDate":344},242,"影视分享","2024-01-02 21:50:02",{"id":346,"name":347,"valid":32,"createdBy":40,"createDate":348},243,"音乐分享","2024-01-02 21:50:08",{"id":350,"name":39,"valid":32,"createdBy":351,"createDate":352},244,"11112222","2024-01-09 16:23:29",{"id":354,"name":39,"valid":32,"createdBy":355,"createDate":356},245,"ssdate","2024-01-17 14:38:21",{"id":358,"name":39,"valid":32,"createdBy":359,"createDate":360},246,"admin666","2024-01-21 15:40:53",{"id":362,"name":39,"valid":32,"createdBy":363,"createDate":364},247,"test51","2024-03-02 14:07:11",{"id":366,"name":39,"valid":32,"createdBy":367,"createDate":368},249,"bf斯金纳","2024-03-14 21:53:53",{"id":370,"name":39,"valid":32,"createdBy":371,"createDate":372},250,"testyear","2024-04-12 21:10:42",{"id":374,"name":375,"valid":32,"createdBy":40,"createDate":376},251,"stable diffuson","2024-04-13 23:00:11",{"id":378,"name":379,"valid":32,"createdBy":40,"createDate":380},252,"每日一图","2024-04-17 21:49:58",{"id":382,"name":383,"valid":32,"createdBy":40,"createDate":384},253,"AI问答","2024-04-23 23:13:47",{"id":386,"name":39,"valid":32,"createdBy":387,"createDate":388},254,"hy9810","2024-04-30 11:23:55",{"id":390,"name":39,"valid":32,"createdBy":391,"createDate":392},256,"444444","2024-05-25 14:47:09",{"id":394,"name":395,"valid":32,"createdBy":396,"createDate":397},257,"我是分类","test","2024-06-04 16:51:00",{"id":399,"name":39,"valid":32,"createdBy":396,"createDate":400},258,"2024-06-10 13:58:35",{"id":402,"name":403,"valid":32,"createdBy":396,"createDate":404},260,"ert","2024-06-10 14:12:08",{"id":406,"name":39,"valid":32,"createdBy":407,"createDate":408},261,"testing","2024-06-19 00:08:44",{"id":410,"name":39,"valid":32,"createdBy":411,"createDate":412},262,"weicong","2024-06-24 21:28:28",{"id":414,"name":415,"valid":32,"createdBy":396,"createDate":416},263,"测试1111","2024-06-26 15:29:56",{"id":418,"name":39,"valid":32,"createdBy":419,"createDate":420},264,"1234","2024-07-08 22:35:39",{"id":422,"name":39,"valid":32,"createdBy":423,"createDate":424},265,"adminadmin","2024-08-07 14:29:16",{"id":426,"name":427,"valid":32,"createdBy":40,"createDate":428},266,"玩车日记","2024-10-13 23:10:34",{"id":430,"name":39,"valid":32,"createdBy":431,"createDate":432},267,"1122","2024-10-31 20:24:40",{"id":434,"name":39,"valid":32,"createdBy":435,"createDate":436},268,"admin_sw","2024-11-01 14:00:32",{"code":4,"msg":5,"data":438},[439,444],{"title":440,"content":20,"createDate":441,"cate":49,"id":442,"uid":443,"page":4,"pageSize":4,"views":75,"comments":4,"wordsNum":4,"cateName":20,"keywords":20,"createBy":20,"nickname":20,"orderBy":20,"order":20,"coverImageUrl":20},"重走三洲田","2024-10-20 22:45:39",50491,"cd692623-db46-4a98-b015-328d96ba6cf3",{"title":445,"content":20,"createDate":446,"cate":49,"id":447,"uid":448,"page":4,"pageSize":4,"views":449,"comments":4,"wordsNum":4,"cateName":20,"keywords":20,"createBy":20,"nickname":20,"orderBy":20,"order":20,"coverImageUrl":20},"老爸跟小叔来玩了一个星期","2024-11-13 21:54:58",50492,"7ba47b22-f60e-4a4b-8b55-30cdc8d6e95e",22,{"code":4,"msg":5,"data":451},{"result":452},{"title":453,"content":454,"createDate":455,"cate":52,"id":456,"uid":457,"page":4,"pageSize":4,"views":458,"comments":4,"wordsNum":4,"cateName":53,"keywords":20,"createBy":40,"nickname":459,"orderBy":20,"order":20,"coverImageUrl":20},"web前端入门到实战：CSS :placeholder-shown伪类实现输入框浮动文字效果","在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。\n浮动的文字标签\n当我们处理输入框时，会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的：\nlabel标签是关联表单元素，提供说明信息最适合的元素。\n输入框的placeholder属性允许您指定没有输入内容时出现在\u003Cinput>元素内的文本。它用于显示示例文字，而不是解释或提示。\n这两个标签属性可以组合起来创建“浮动文字标签”的效果，这种效果具体指的是：\n首先，用户看到一个带有placeholder属性的input标签，显示了一些示例性质的问题。label元素默认是隐藏的。\n当input输入框被激活并开始输入内容时，label元素会浮动显示在输入框的上方。\n当输入框内有文字内容时，label元素就一直保持显示在输入框的上方，用于标示用户输入的内容。\n纯CSS实现浮动的标签文字\n注册focus事件，判断是否输入有值，隐藏一个元素，并根据输入框是否有内容来决定是否显示这个元素。这听起来像是JavaScript的工作，对吗？并不是的！因为有一个CSS伪类:placeholder-shown可以实现上述的效果。MDN中是这样解释这个伪类的：\n:placeholder-shown CSS 伪类 在 \u003Cinput> 或 \u003Ctextarea> 元素显示 placeholder text\n时生效。\n换句话说，如果输入框中有任何值，我们都可以认为:placeholder-shown伪类不会被触发。\n下面是我使用这个伪类来实现浮动标签的思路：\n构建HTML代码，通过相邻兄弟选择器就可以选择input元素所对应的label标签，并将这两个元素包裹在一个div中。\n设置input，label以及::placeholder伪元素的样式。\n将label元素放置在起始位置，并在div中垂直居中，然后隐藏它。\n通过:not, :focus和:placeholder-shown伪类的组合决定什么时候显示label标签：如果placeholder text消失了，则显示label — input:not(:placeholder-shown) + label；如果输入框获取到了焦点，并且没有显示placeholder text，则显示label — input:focus:not(:placeholder-shown) + label\n下面就按照上面的思路来完成HTML与CSS。\nHTML & CSS\nHTML的结构实际上非常简单，就像这样：\n\u003Cdiv class=\"Input\">\n  \u003Cinput type=\"text\" id=\"input\" class=\"Input-text\" placeholder=\"Your first name, e.g. Nicholas\">\n  \u003Clabel for=\"input\" class=\"Input-label\">First name\u003C/label>\n\u003C/div>\nCSS代码：\n专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧\n（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）\n.Input {\n  /**\n   * 容器的相对定位很重要, 因为label元素的浮动位置是相对于它计算的\n   */\n  position: relative;\n}\n.Input-text {\n  /**\n   * 设置输入框的样式。 字体大小和行高对于确定标签的精确定位非常重要\n   */\n  display: block;\n  margin: 0;\n  width: 100%;\n  /**\n   * 这些属性在示例中会通过自定义属性的方式一次性设置：\n   *\n   * padding\n   * font-size\n   * line-height\n   */\n}\n.Input-text:focus {\n  /**\n   * 输入框获取焦点时的样式\n   */\n}\n.Input-label {\n  /**\n   * label元素设置为绝对定位，并根据父元素和输入框计算出它的位置与移动距离\n   */\n  display: block;\n  position: absolute;\n  opacity: 0;\n  /**\n   * 这些属性在示例中会通过自定义属性的方式一次性设置：\n   *\n   * bottom\n   * left\n   * font-size\n   * line-height\n   * transform\n   * transform-origin\n   * transition\n   */\n}\n.Input-text:placeholder-shown + .Input-label {\n  /**\n   * 当占位文字可见时，会隐藏label\n   */\n  visibility: hidden;\n  z-index: -1;\n}\n.Input-text:not(:placeholder-shown) + .Input-label,\n.Input-text:focus:not(:placeholder-shown) + .Input-label {\n  /**\n   * 当占位文字消失后，例如当输入内容时，label元素会显示并浮动在输入框的上面\n   */\n  visibility: visible;\n  z-index: 1;\n  opacity: 1;\n  /**\n   * 这些属性在示例中会通过自定义属性的方式一次性设置\n   *\n   * transform\n   * transition\n   */\n}\n完整的演示效果\n浏览器支持\n到目前为止，浏览器支持度还不错，除了Edge。\n总结\n我希望你通过这篇文章学到了一些东西，你还可以想出一些使用:placeholder伪类有趣的新方法。再次感谢您的阅读！\n\u003Cp style='opacity:0'>\u003Ca href='https://www.dsiab.com' style='cursor:unset'>本文章由javascript技术分享原创和收集\u003C/a>\u003C/p>","2020-04-12 19:54:46",1416,"dbabbc59-ca85-490a-897a-3ed050e212e3",764,"图恩",{},{"06PyIpggrg":20,"574zKRyEAZ":20,"IDsRz2IOoy":20,"g3oVWSWIeZ":20,"7OKgyDxXq6":20,"cGC9GjXW5a":462},["NuxtError",463],{"message":464,"statusCode":465,"statusMessage":466,"data":467}," (500 Internal Server Error (https://admin.dsiab.com/portal-service/pages/getRecommendBySameTags?id=dbabbc59-ca85-490a-897a-3ed050e212e3))",500,"Internal Server Error",{"timestamp":468,"status":465,"error":466,"path":469},"2024-11-17T10:35:40.404+00:00","/pages/getRecommendBySameTags",true,"/post/dbabbc59-ca85-490a-897a-3ed050e212e3"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.86e33eb6.js" crossorigin></script></body>
</html>