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

最新推荐文章于 2023-06-30 16:58:04 发布
最新推荐文章于 2023-06-30 16:58:04 发布
阅读量3k 收藏 2
点赞数
分类专栏： HTML5 | Thymeleaf | Freemarker 文章标签： css input placeholder
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/J080624/article/details/79312870
版权

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

流烟默
关注
专栏目录
微信小程序 - ＜textarea＞ 多行文本输入框 placeholder 属性换行显示文字（样式修改的详细教程）
王佳斌
10-20 8450
解决微信小程序input框 placeholder 换行textarea，wechat小程序 textarea的placeholder如何换行，vant-weapp 组件库 Field 输入框组件 van-field 的placehold怎么换行？,微信小程序中如何设置textarea中的placeholder换行显示，css input输入框placeholder样式的修改，怎么让textarea的灰色placeholder换行显示描述呢，微信小程序 - textarea 多行文本输入框 placehol
vant学习踩坑记录2 input-placeholder 字体颜色和 scoped 样式
weixin_51634734的博客
03-14 4761
scoped属性和深入选择器 使用 vant 组件时, 经常有组件创建的元素, 用 scoped 属性的 css 样式没办法生效 scoped属性的意思, 是只对本页面内的元素生效, 且优先级极高, 但 vant 组件动态创建的元素有时判定属于该页面, 有时又不属于, 具体规律不清楚 这种情况, vue 给出了解决方案 ::v-deep , 选择器深入 .main ::v-deep .branch{ color: #666666; } ::v-deep 前面的选择器必须在 scoped 页面内, 最
css改变placeholder颜色
weixin_45966674的博客
03-19 2240
基本写法 input::-webkit-input-placeholder { color: #ff4949; } 如果你用到vue项目 样式设置了scoped 你就用 input>>>::-webkit-input-placeholder { color: #ff4949; } 不得不承认 在有些需求上 这东西还是挺有用的 ...
CSS修改placeholder颜色的方法
u011884200的博客
06-30 5869
placeholder是一种输入提示，是指在输入框中出现的提示文字，它可以提示用户输入的内容，方便用户输入。
奇妙的css之旅——实现placeholder两种颜色
不一样的世界，不一样的人生
11-04 2125
将必填标识放入placeholder中，实现两种颜色的效果
CSS 修改input中的placeholder默认颜色
热门推荐
单枪匹码
12-05 5万+
使用input-placeholder属性来修改placeholder的默认颜色： 1、说明：placeholder是input框中的提示文字，默认是灰色的，而color是修改input中用户输入文本的颜色，所以不能通过color来设置placeholder的颜色。 2、修改页面所有input中placeholder颜色的语法：（直接写在<style></style>标签下...
css3 之 修改input 输入框的placeholder 默认样式
lgc的博客
07-19 1300
/* 通用 */ ::-webkit-input-placeholder { color:#999999; text-align: center;font-size: 15px;font-weight: bold; } ::-moz-placeholder { color:#f00; } /* firefox 19+ */ :-ms-input-placeholder { color:#f...
修改输入框placeholder文字默认颜色-webkit-input-placeholder方法
12-13
总结来说，修改HTML5输入框`placeholder`文本颜色主要通过CSS的特定选择器来实现，如`-moz-placeholder`、`-ms-input-placeholder`和`-webkit-input-placeholder`。通过正确使用这些选择器，可以确保在不同浏览器中...
HTML5 input placeholder 颜色修改示例
09-28
在CSS中，修改placeholder颜色的一般语法如下： ```css input::-webkit-input-placeholder { color: #指定的颜色; } input:-moz-placeholder { color: #指定的颜色; } input::-moz-placeholder { color: #指定的...
CSS 自定义 input placeholder 样式（如颜色） 与 placeholder默认颜色
szy_fasheng的博客
07-18 839
input placeholder 默认颜色一般是 gray 灰色 或者 浅灰色 自定义input placeholder 样式如下： input::-webkit-input-placeholder{ color:#000; } 这里将颜色设置为黑色
css修改input默认值颜色
weixin_33916256的博客
11-22 2373
input::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc;}input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ccc;}input::-moz-placeholder { /* Mozilla Firefox 19+ */ colo...
CSS,input改变输入框颜色
qq_45448242的博客
03-09 3226
input输入框改变颜色。
css修改input提示文字颜色
weixin_40791614的博客
02-08 880
1
CSS - 改变 input 输入框 placeholder 的字体颜色大小
王佳斌
01-30 3711
前言 该方法只适用于 pc 端，移动端无效。 代码 input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333; } input:-ms-input-placeholder {
css设置placeholder颜色
偏执的小男孩儿
07-04 1225
设置css样式
CSS设置输入框默认文字颜色（webkit-input-placeholder等）
xhreaishengming的专栏
08-29 1万+
在html5中input，textarea等元素新添加了placeholder的属性，我们可以通过css设置placeholder的样式，对于ie，firefox，以及webkit内核的浏览器需要使用不同的样式写法。 如下测试代码：       type="text/css">  #myInput::-webkit-input-placeholder { color:
前端----HTML/CSS 修改placeholder的颜色
nO0b
09-24 2万+
    placeholder这个属性是HTML5中新增的属性，作用是描述输入字段预期值的提示信息 如何修改placeholder的颜色呢? 但是存在一定的浏览器兼容问题,以chorme为例: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt...
修改input输入框placeholder文字默认颜色
weixin_37861326的博客
06-22 8356
input输入框，placeholder默认颜色修改，照如下添加样式：input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } input:-moz-placeholder, textarea:-moz-p...
CSS设置input的placeholder颜色
qq_38231822的博客
03-15 2343
::-webkit-input-placeholder{ color: #ccc; font-size:14px; 　　} :-moz-placeholder{ color: #ccc; font-size:14px; 　　} ::moz-placeholder{ color: #ccc; font-size:14px; 　　} :-ms-input-placeholder{ .
el-selected 的placeholder的样式修改
最新发布
09-15
如果你想要修改其占位符（即未选择时显示的文字）的样式，你可以通过 CSS 来实现。下面是一个基本的示例： ```css .el-select .el-input__inner[placeholder]:focus { /* 当输入框获得焦点 */ color: your-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

流烟默

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值