chrome浏览器记住密码input背景色问题及input的placeholder的样式修改

最新推荐文章于 2026-06-14 11:35:28 发布

原创最新推荐文章于 2026-06-14 11:35:28 发布 · 747 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css

本文介绍了解决浏览器自动填充密码导致的输入框背景色问题的方法，并详细展示了如何为不同浏览器的输入框placeholder设置统一的样式，确保用户体验的一致性。

一.浏览器记住密码input背景色问题

input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;/*浏览器记住密码的字的颜色*/
    transition: background-color 5000s ease-in-out 0s;/*通过延时渲染背景色变相去除背景颜色*/
    caret-color: #ffffff;/*光标颜色*/
}

input:focus { outline: none; }/*外边框线去除*/

二.placeholder的样式修改及各浏览器兼容

input::-webkit-input-placeholder {
        /* placeholder颜色  */
         color: #aab2bd;
         /* placeholder字体大小  */
        font-size: 12px;
       /* placeholder位置  */
        text-align: right;
   }
 input ::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
         /* placeholder颜色  */
         color: #aab2bd;
         /* placeholder字体大小  */
        font-size: 12px;
       /* placeholder位置  */
        text-align: right;
}
 input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
        /* placeholder颜色  */
         color: #aab2bd;
         /* placeholder字体大小  */
        font-size: 12px;
       /* placeholder位置  */
        text-align: right;
}
 input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
   c      /* placeholder颜色  */
         color: #aab2bd;
         /* placeholder字体大小  */
        font-size: 12px;
       /* placeholder位置  */
        text-align: right;
}
 input:-ms-input-placeholder { 
 /* Internet Explorer 10-11 */
         /* placeholder颜色  */
         color: #aab2bd;
         /* placeholder字体大小  */
        font-size: 12px;
       /* placeholder位置  */
        text-align: right;
}