修改input框中placeholder

最新推荐文章于 2024-09-01 21:55:50 发布

原创最新推荐文章于 2024-09-01 21:55:50 发布 · 3.4k 阅读

3 ·

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

标签

#css #html #html5

Angular 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何调整不同浏览器下input和textarea的placeholder文字颜色、字号和位置，包括WebKit、Firefox、IE等，并提供了居中和定位的示例。

placeholder颜色调整：

/* WebKit browsers 适配谷歌 */
input::-webkit-input-placeholder { 
    color: #BDCADA;
}
 /* Mozilla Firefox 4 to 18 适配火狐 */
input:-moz-placeholder {
    color: #BDCADA;
}
 /* Mozilla Firefox 19+ 适配火狐 */
input::-moz-placeholder {
    color: #BDCADA;
}
 /* Internet Explorer 10+  适配ie*/
input:-ms-input-placeholder {
    color: #BDCADA;
}

placeholder文字颜色、字号、位置调整：
每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。

　　input::-webkit-input-placeholder { /* WebKit browsers */

　　color:#999;font-size:16px;

　　}

　　input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

　　color:#999;font-size:16px;

　　}

　　input::-moz-placeholder { /* Mozilla Firefox 19+ */

　　color:#999;font-size:16px;

　　}

　　input:-ms-input-placeholder { /* Internet Explorer 10+ */

　　color:#999;font-size:16px;

　　}

input::-ms-input-placeholder{text-align: center;}
input::-webkit-input-placeholder{text-align: center;}

可以将居中属性替换为定位属性：

input::-webkit-input-placeholder{position：relative；left：20px；}