设置input 中placeholder的样式

短命女 2022-05-09 04:58 341阅读 0赞

一、效果
在这里插入图片描述
二、代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
  8.             color: red;
  9.         }
  10.         ::-moz-placeholder { /* Firefox 19+ */  
  11.             color: red;
  12.         }
  13.         :-ms-input-placeholder { /* IE 10+ */ 
  14.          color: red;
  15.         }
  16.         :-moz-placeholder { /* Firefox 18- */ 
  17.          color: red;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     名字：<input type="" name="" placeholder="我是一个测试">
  23. </body>
  24. </html>

三、HTML input placeholder支持的属性

  1. font properties
  2. color
  3. background properties
  4. word-spacing
  5. letter-spacing
  6. text-decoration
  7. vertical-align
  8. text-transform
  9. line-height
  10. text-indent
  11. opacity

eg1、
效果
在这里插入图片描述
代码：

  1. input::-webkit-input-placeholder {
  2.            padding-left:30px;
  3.            opacity:0.5;
  4.         }

剩下的大家自己去测哈~

发表评论

表情：
评论列表 （有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读