又一个布局利器，CSS伪类:placeholder-shown

 一般我们常见placeholder伪类选择器用来修改默认样式及文案，忽然发现placeholder-shown伪类选择器，比较官方的解释是。

网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了晋江免费建站欢迎大家使用！

CSS伪类表示任何显示占位符文本的form元素。

简单来说就是当输入框的placeholder内容显示的时候，输入框干嘛干嘛。

兼容性如下，在移动端没什么问题

placeholder-show是如何工作的?

:placeholder-shown CSS 伪类 在 或

  • // css 
  • input:placeholder-shown, textarea:placeholder-shown{ 
  •   border:1px solid pink;
  • }

    • 如果 placeholder 为空 placeholder-show 就没效果了：

     
 
 
 
      
  
  
  
  
    1. // html
      2. 
  
  
  
  
      3. 
  
  
  
  
      4.

    :placeholder-shown vs ::placeholder

    我们可以使用:placeholder-shown设置input元素的样式。

     
 
 
 
      
  
  
  
  
    1. input:placeholder-shown {
      2. 
  
  
  
  
    2.   border: 1px solid pink;
      3. 
  
  
  
  
    3.   background: yellow;
      4. 
  
  
  
  
    4.   color: green;
      5. 
  
  
  
  
    5. }
      6.

    注意一些奇怪的问题??-我们设置 color: green，但没有作用用。这是因为:placeholder-shown仅会针对input本身。对于实际的占位符文本，必须使用伪元素::placeholder。

     
 
 
 
      
  
  
  
  
    1. input::placeholder {
      2. 
  
  
  
  
    2.   color: green;
      3. 
  
  
  
  
    3. }
      4.

    我注意到有一些其他的属性，如果应用::placeholder-shown，也会影响placeholder的样式。

     
 
 
 
      
  
  
  
  
    1. input:placeholder-shown, textarea:placeholder-shown{ 
      2. 
  
  
  
  
    2.   font-style: italic;
      3. 
  
  
  
  
    3.   text-transform: uppercase;
      4. 
  
  
  
  
    4.   letter-spacing: 5px;
      5. 
  
  
  
  
    5. }
      6.

    我也不知道这是啥情况，也许是因为这些属性被placeholder继承了，如果你知道原因，欢迎留言告诉我一下，谢谢。

    :placeholder-shown vs :empty

    :placeholder-shown是专门用于确定元素是否显示占位符的对象，我们主要使用它来检查input 内容是否为空(假设所有的input都有一个占位符)。这里你可能会想，使用 empty 也是可以的吧?我们来看看。

     
 
 
 
      
  
  
  
  
    1. // html
      2. 
  
  
  
  
      3. 
  
  
  
  
      4. 
  
  
  
  
    4. 
  
  
  
  
    5. // css
      6. 
  
  
  
  
    6. input:empty {
      7. 
  
  
  
  
    7.   border: 1px solid pink;
      8. 
  
  
  
  
    8. }
      9. 
  
  
  
  
    9. 
  
  
  
  
    10. input {
      11. 
  
  
  
  
    11.   border: 1px solid black;
      12. 
  
  
  
  
    12. }
      13.

    这里看似empty起作用了，因为我们看到的是粉红色边框，但这实际上不起作用??

    之所以显示粉红色，是因为伪类增加了 css 的权重。类似于类选择器(即.form-input)比类型选择器(即input)具有更高的权重。高权限选择器将始终覆盖低权重设置的样式。

    所以我们可以这样说：不要使用:empty检查输入元素是否为空。

    如果检查 input 内容是否为空(在没有点位符的情况下)?

    我们检查输入是否为空的唯一方法是使用:placeholder-shown。但是如果我们的输入元素没有占位符会发生什么呢? 这里有个取巧的方法：传入一个空字符串" "。

     
 
 
 
      
  
  
  
  
    1. // html
      2. 
  
  
  
  
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. //css
      5. 
  
  
  
  
    5. input:placeholder-shown {
      6. 
  
  
  
  
    6.   border-color: pink;
      7. 
  
  
  
  
    7. }
      8.

    组合其它选择器

    我们可以使用:not伪类对某些事物进行逆运算。在这里，我们可以在输入不是空的情况下进行定位。

     
 
 
 
      
  
  
  
  
    1. //html
      2. 
  
  
  
  
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. // css
      5. 
  
  
  
  
    5. input:not(:placeholder-shown) {
      6. 
  
  
  
  
    6.   border: 1px solid green;
      7. 
  
  
  
  
    7. }
      8.

    实战

    用placeholder-shown我们可以实现下面动效

    具体代码如下:

    Html

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.     
      3. 
  
  
  
  
    3.     邮箱
      4.

    Css

     
 
 
 
      
  
  
  
  
    1. .input{
      2. 
  
  
  
  
    2.    position: relative;
      3. 
  
  
  
  
    3.  }
      4. 
  
  
  
  
    4. .input-fill{
      5. 
  
  
  
  
    5.   border: 1px solid #ececec;
      6. 
  
  
  
  
    6.   outline: none;
      7. 
  
  
  
  
    7.   padding: 13px 16px 13px;
      8. 
  
  
  
  
    8.   font-size: 16px;
      9. 
  
  
  
  
    9.   line-height: 1.5;
      10. 
  
  
  
  
    10.   width: fit-content;
      11. 
  
  
  
  
    11.   border-radius: 5px;
      12. 
  
  
  
  
    12. }
      13. 
  
  
  
  
    13. .input-fill:placeholder-shown::placeholder {
      14. 
  
  
  
  
    14.   color: transparent;
      15. 
  
  
  
  
    15. }
      16. 
  
  
  
  
    16. .input-label {
      17. 
  
  
  
  
    17.   position: absolute;
      18. 
  
  
  
  
    18.   font-size: 16px;
      19. 
  
  
  
  
    19.   line-height: 1.5;
      20. 
  
  
  
  
    20.   left: 16px; top: 14px;
      21. 
  
  
  
  
    21.   color: #a2a9b6;
      22. 
  
  
  
  
    22.   padding: 0 2px;
      23. 
  
  
  
  
    23.   transform-origin: 0 0;
      24. 
  
  
  
  
    24.   pointer-events: none;
      25. 
  
  
  
  
    25.   transition: all .25s;
      26. 
  
  
  
  
    26. }
      27. 
  
  
  
  
    27. .input-fill:focus{
      28. 
  
  
  
  
    28.   border: 1px solid #2486ff;
      29. 
  
  
  
  
    29. }
      30. 
  
  
  
  
    30. .input-fill:not(:placeholder-shown) ~ .input-label,
      31. 
  
  
  
  
    31. .input-fill:focus ~ .input-label {
      32. 
  
  
  
  
    32.   transform: scale(0.75) translate(0, -32px);
      33. 
  
  
  
  
    33.   background-color: #fff;
      34. 
  
  
  
  
    34.   color: #2486ff;
      35. 
  
  
  
  
    35. }
      36.

    作者：Samantha Ming 译者：前端小智 来源：medium 原文：https://www.samanthaming.com/tidbits/88-css-placeholder-shown/

    本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

    网站标题：又一个布局利器，CSS伪类:placeholder-shown
    URL网址：http://www.shufengxianlan.com/qtweb/news8/18508.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    解决方案知识

    分类信息网

    梓潼网站建设　　 　德阳机房托管　　 　成都画册制作　　 　成都网站推广　　 　成都服务器租赁　　 　网站维护报价　　 　成都商城网站制作　　 　成都花箱　　 　盐亭做网站　　 　四川成都网站设计　　 　成都移动服务器托管　　 　中晴建设　　 　成都模版网站建设　　 　网站推广公司　　 　网站改版　　 　西部信息服务器托管　　 　成都花箱厂家　　 　成都网站设计公司　　 　成都SEO公司　　 　App开发