修改 input / textarea placeholder 属性的颜色和字体大小

2020-09-18 15:31:35 阅读：288 来源： 互联网

标签：moz 冒号字体大小 textarea 666 input placeholder

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #666;
    font-size: 16px;  
}
input::-moz-placeholder, 
textarea::-moz-placeholder {  /* Mozilla Firefox 19+ */
    color: #666;
    font-size: 16px;  
}
input:-moz-placeholder, 
textarea:-moz-placeholder {  /* Mozilla Firefox 4 to 18 */
    color: #666;
    font-size: 16px;  
}
input:-ms-input-placeholder, 
textarea:-ms-input-placeholder {  /* Internet Explorer 10-11 */
    color: #666;
    font-size: 16px;  
}

注意：

　　1、WebKit, Blink, Edge 浏览器等需要带上 -webkit- 前缀，且是双冒号，写的时候还要带上input

　　2、针对火狐浏览器则有两种写法，一种是针对低版本的，一种是针对高版本的，二者都需要带上-moz-前缀。要点1：火狐低版本的使用冒号（:），而高版本的使用双冒号（::）；要点2：火狐浏览器不需要像webkit内核那样要带上input。

　　3、由于 placeholder 属性只在IE10+才支持，因此，针对IE10、IE11的写法是加上-ms-前缀，使用的是冒号（:），需要带上input

特别强调：冒号与双冒号的问题，还有是否需要加上input

不用CSS得到同样效果的方法：

<input type="text" value="placeholder text" onfocus="this.style.color='#000';this.value='';" style="color: #f00;"/>

这个方法也不是很友好，当内容输入一半若点击到文本框外的地方，再重新输入的时候，前面输入的内容为空了 o'o 所以还是少用吧~~

转自博客：

https://www.cnblogs.com/dhui/p/10415586.html

标签：moz,冒号,字体大小,textarea,666,input,placeholder
来源： https://www.cnblogs.com/art-poet/p/13691498.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

修改 input / textarea placeholder 属性的颜色和字体大小