CSS - 修改输入框placeholder默认颜色

简介: CSS - 修改输入框placeholder默认颜色

有时为了配合整个页面效果,可能会去修改输入框的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不支持。

目录
相关文章
|
1月前
|
前端开发
CSS中颜色的定义
CSS中颜色的定义
18 0
|
5月前
CSS3 颜色-透明度
CSS3 颜色-透明度
18 0
|
5月前
|
前端开发
css改input变输入框光标颜色demo效果示例(整理)
css改input变输入框光标颜色demo效果示例(整理)
|
2月前
|
前端开发
(css必看)禁止用户拖动,禁止选中复制,禁止输入框输入
(css必看)禁止用户拖动,禁止选中复制,禁止输入框输入
89 1
|
2月前
|
前端开发
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
28 0
|
3月前
|
前端开发
css去掉input框里面的默认颜色
css去掉input框里面的默认颜色
26 0
|
5月前
|
前端开发
css只改变input输入框光标颜色
css只改变input输入框光标颜色
|
29天前
|
Web App开发 移动开发 JavaScript
分享88个HTML&CSS源码,总有一款适合您
分享88个HTML&CSS源码,总有一款适合您
21 1
|
29天前
|
移动开发 监控 JavaScript
分享77个HTML&CSS源码,总有一款适合您
分享77个HTML&CSS源码,总有一款适合您
24 1

相关产品

  • 云迁移中心