CSS - 改变 input 输入框 placeholder 的字体颜色大小

已于 2022-11-03 19:27:18 修改
阅读量3.8k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： + CSS 文章标签： css 前端 javascript
于 2021-01-30 23:30:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/113448609
+ CSS 专栏收录该内容
63 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了如何针对不同浏览器（WebKit、Firefox、IE）设置`input`元素的`placeholder`属性样式，包括字体大小和颜色，确保在PC端的效果统一。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

该方法只适用于 pc 端，移动端无效。

代码

input::-webkit-input-placeholder {
   
    
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder {
   
    
    /* Mozilla Firefox 19+ */</
了解本专栏 订阅专栏 解锁全文
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
2402_85758349的博客
08-17 1262
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
如何设置输入框input中placeholder的字体颜色、字号
water_v的博客
10-30 2万+
一、须知 placeholder属性时css3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占用文本。二、设置placeholder文字颜色、字号 方式1 因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定（可以在冒号前面写input和textarea）。::-webkit-input-placeholder{/*Webkit browsers*/
css改变placeholder样式
trigger的博客
12-27 4521
placeholder默认样式已经渐渐不能满足开发者的需求，接下来推荐给大家自定义placeholder的样式的方法。 方式1：因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。 ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; f...
layui 中 css 如何设置input placeholder 字体颜色和大小
cbaln0的博客
07-02 1194
在 Layui 中设置输入框（input）的占位符（placeholder）的字体颜色和大小，可以通过 CSS 来实现。：针对不同浏览器，使用不同的伪元素选择器来设置样式。例如，你可以将这些样式放在你的主样式表文件（如。：确保这些样式应用到你的 Layui 输入框。）中，或者直接在 HTML 文件中的。：在你的 CSS 文件或。标签中添加自定义样式。
设置输入框input中placeholder的字体颜色、字体大小
热门推荐
呆鸟慢飞的博客
02-05 2万+
如何设置输入框input中placeholder的字体颜色、字号 须知 placeholder属性时css3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占用文本。 设置placeholder文字颜色、字号 方式一 因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定（可以在冒号前面写input和textarea）。 ::-webkit-input-placeholder{/*Webkit browsers*/ color:#999; font-size:16px
[css] 如何更改placeholder的字体颜色和大小？
歌谣的博客
02-20 963
[css] 如何更改placeholder的字体颜色和大小？ <style> /* Chrome浏览器 */ input::-webkit-input-placeholder { color: red; } /* 火狐浏览器 */ input::-moz-placeholder { color: red; } /* IE */ input:-ms-input-placeholder { c
java的css改变字体颜色_修改placeholder字体颜色与大小示例
weixin_32112607的博客
02-28 355
修改placeholder字体颜色与大小要注意每个浏览器内核是不一样的，不过修改也很简单，看看下面的示例就可以了，如下。html input输入框代码css style样式代码，如下，复制到你的项目中即可。:-moz-placeholder{/*MozillaFirefox4to18*/color:#000;opacity:0.3;font-size:15px;}::-moz-...
修改输入框placeholder文字默认颜色-webkit-input-placeholder方法
12-13
总结来说，修改HTML5输入框`placeholder`文本颜色主要通过CSS的特定选择器来实现，如`-moz-placeholder`、`-ms-input-placeholder`和`-webkit-input-placeholder`。通过正确使用这些选择器，可以确保在不同浏览器中...
CSS使用placeholder-shown伪类实现输入框浮动文字效果
11-21
`:placeholder-shown`是CSS3引入的一个伪类，它允许开发者更加灵活地控制输入框（`<input>`）中占位符（`placeholder`）的显示状态。本文将详细讲解如何利用`:placeholder-shown`伪类来实现一种被称为“浮动文字标签...
css 设置 input placeholder 的字体颜色
LonewoIf的博客
01-03 5847
input::-webkit-input-placeholder { /* WebKit browsers */ color: black; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: black; } input::-moz-placeholder { ...
input标签分别设置input文本框输入文本和placeholder提示符字体大小
poker624的博客
02-12 1万+
以下面为例，设置搜索框中输入文本字体大小和提示符的字体大小 <form action="#"> <input type="search" placeholder="Search ElementTech..." name="search" class="input"> </form> 分别设置input标签和placeholder提示符的css样式： .input{ display: table-cell; widt
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:
input输入框字体与placeholder字体大小不一致时，字体无法垂直居中
sunyanjing_8949的博客
08-01 747
当需求中遇到input输入框字体与placeholder字体大小不一致时，会产生字体无法垂直居中的问题
input的placeholder字体大小无法修改？
weixin_30908649的博客
12-01 420
链接如下 其实chrome是有这个东西的，那就是shadow DOM。 什么是Shadow-Dom？Shadow DOM是指浏览器的一种能力，它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。它的最大的用处在于隔离外部环境用于封装组件。 比如说，我们正常写的输入框html代码是这样的： <input name="password" ma...
css 修改input提示文字颜色
阿门阿窗一颗葡萄树
06-16 2789
input:-moz-placeholder, textarea:-moz-placeholder { color: #fff; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #fff; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #fff ; }
css修改input提示文字颜色
weixin_40791614的博客
02-08 1196
1
CSS3中,如何设置text文本框中,placeholder的字体颜色大小等
liwusen的博客
06-11 1万+
1.CSS3中可以通过placeholder属性为文本框（text）或者文本域（textarea）设置默认值，         效果如下所示：                           我们发现，placeholder字体的颜色默认为偏灰色，如何改变placeholder字体的属性呢？                 2.CSS3的伪类为::，而CSS2
修改 input 中 placeholder的 颜色和 字体大小
qq_55681529的博客
06-08 6157
【代码】修改 input 中 placeholder的 颜色和 字体大小。
修改el-input提示文字placeholder颜色
最新发布
03-13
为了修改 Element UI 的 `el-input` 组件中的占位符文字颜色，可以通过自定义 CSS 或 SCSS 来实现。具体方法如下： 对于不同浏览器的支持，需要编写特定的选择器来覆盖默认样式[^1]。 #### 使用纯CSS方式 针对不同...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

蔡来了

请作者喝杯咖啡 :)

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

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

打赏作者

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

抵扣说明：

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

余额充值