CSS - 设置placeholder样式

科技前沿 • 2025-02-20 19:07 • 阅读 48

大家好，我是讯享网，很高兴认识大家。

1.第一种最简单的写法：在谷歌浏览器中使用

 textarea::placeholder { 
    font-size: 12px; font-family: Arial; letter-spacing: 5px; color: # !important; padding-left: 13px; padding-top: 9px; } input::placeholder { 
    font-size: 12px; font-family: Arial; letter-spacing: 5px; color: # !important; padding-left: 13px; padding-top: 9px; }

讯享网

2.第二种写法：

注：因为不同浏览器的兼容性不同，所以在写代码方面也会有所差别。

讯享网input::-webkit-input-placeholder{ 
    /* 使用webkit内核的浏览器 */ color: #E0484B; } input:-moz-placeholder{ 
    /* Firefox版本4-18 */ color: #E0484B; } input::-moz-placeholder{ 
    /* Firefox版本19+ */ color: #E0484B; } input:-ms-input-placeholder{ 
    /* IE浏览器 */ color: #E0484B; }

注：冒号前可写相对应的input或textarea元素等，也可以省略不写，直接冒号开头

讯享网

3.第三种写法：

input[type='text']::-webkit-input-placeholder{ 
    /* 使用webkit内核的浏览器*/ color: #E97F81; } input[type='text']:-moz-placeholder{ 
    /* Firefox版本4-18 */ color: #E0484B; } input[type='text']::-moz-placeholder{ 
    /* Firefox版本19+ */ color: #E0484B; } input[type='text']:-ms-input-placeholder{ 
    /* IE浏览器 */ color: #E0484B; }

注：第三种写法中的text是相对应html中的text，如果是密码框，那么相对应的就是password。

讯享网<input type="password" placeholder="字体颜色为红色">

input[type='password']::-webkit-input-placeholder{ 
    /* 使用webkit内核的浏览器*/ color: #E97F81; }

本文参考

CSS - 设置placeholder样式

1.第一种最简单的写法：在谷歌浏览器中使用

2.第二种写法：

3.第三种写法：

相关推荐