修改placeholder文字颜色

原创已于 2022-07-26 10:59:51 修改 · 8.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2021-05-06 11:44:52 首次发布

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种处理CSS占位符提示符浏览器兼容性问题的方法。一种是利用autoprefixer工具自动添加浏览器前缀，另一种是手动添加如-webkit-, -moz-, -ms-等前缀。特别地，对于Firefox中占位符的透明度问题，需要额外设置opacity:1来确保显示正常。

方法1. 借助autoprefixer 之类工具

依赖于项目有自动化添加前缀的，设置了 autoprefixer 之类工具的会为编译后的css自动补全所需的前缀。Autoprefixer 通过 Can I use，按兼容的要求，对相应的 CSS 代码添加浏览器厂商前缀。

input::placeholder {
    color: red;
    opacity: 1; //兼容火狐默认给占位符设置了透明度
}
/*在ie下没有效果   实际项目差那个就手动添加前缀 */
input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}

方法2. 自己手动加前缀 (推荐)

  input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #7f7e7e;
  }
  input:-ms-input-placeholder { /* IE 10+ */
    color: #7f7e7e;
  }
  input:-moz-placeholder { /* Firefox 18- */
    color: #7f7e7e;
    opacity: 1;
  }
  input::-moz-placeholder { /* Firefox 19+ */
   color: #7f7e7e;
   opacity: 1;
 }