CSS - 修改输入框placeholder默认颜色
程序员文章站
2022-03-11 17:26:05
...
有时为了配合整个页面效果，可能会去修改输入框的placeholder样式。
源码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: blue;
opacity:1;
font-size: 5px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
opacity:1;
}
/* 以上两个属性分别针对火狐浏览器不同版本 */
input:-ms-input-placeholder { /* IE */
color: yellowgreen;
opacity:1;
}
input::-webkit-input-placeholder{/* webkit内核的浏览器，如谷歌，edge */
color: blue;
opacity:1;
font-size: 15px;
}
/*input::placeholder{/* 去掉私有前缀，谷歌和火狐有效；IE和edge无效 */
/* color: orchid;
opacity:1;
font-size: 15px;
}*/
</style>
</head>
<body>
<input name="secret" placeholder="请输入悄悄话" />
</body>
</html>
Chrome，Firefox，IE和Edge下分别显示如下：
如果去掉上面四个样式，只使用最后一个，即：
input::placeholder{/* 去掉私有前缀，谷歌和火狐有效；IE和edge无效 */
color: orchid;
opacity:1;
font-size: 15px;
}测试来看，只有Chrome和Firefox支持，IE和Edge不支持。
上一篇： 七夕节去哪里吃饭？七夕节有哪些饮食风俗？
下一篇： 如何写一篇优质的软文