修改placeholder样式

最新推荐文章于 2024-01-23 18:39:49 发布

转载最新推荐文章于 2024-01-23 18:39:49 发布 · 479 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=h0hi2b000hib&title=%E4%BF%AE%E6%94%B9placeholder%E6%A0%B7%E5%BC%8F

文章标签：

#css3

前端专栏收录该内容

1897 篇文章

订阅专栏

本文详细介绍了如何使用CSS伪元素选择器为不同浏览器定制登录输入框的placeholder样式，包括颜色、字体大小及过渡效果，确保了在新版火狐和IE10等浏览器中的兼容性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 /* 修改placeholder样式，兼容性 新版火狐，IE10  */
 2         .login-input::-webkit-input-placeholder {
 3             color: #000;
 4             font-size: 0.3rem;
 5             transition: .5s;
 6             transform-origin: left top;
 7         }
 8         .login-input::-moz-placeholder {
 9             color: #000;
10             font-size: 0.3rem;
11             transition: .5s;
12             transform-origin: left top;
13         }
14         .login-input:-ms-input-placeholder {
15             color: #000;
16             font-size: 0.3rem;
17             transition: .5s;
18             transform-origin: left top;
19         }
20         /* 兼容性 新版火狐，IE10  */
21         .login-input:focus::-webkit-input-placeholder {
22             color: #aaa;
23             transform: scale(0.7) translateY(-0.28rem);
24         }
25         .login-input:focus::-moz-placeholder {
26             color: #aaa;
27             transform: scale(0.7) translateY(-0.28rem);
28         }
29         .login-input:focus:-ms-input-placeholder {
30             color: #aaa;
31             transform: scale(0.7) translateY(-0.28rem);
32         }