input 修改placeholder中颜色和字体大小

阿wei程序媛

已于 2022-10-25 16:02:03 修改

阅读量4.7k

点赞数 1

分类专栏： css 文章标签：前端开发 CSS placeholder 字体颜色字体大小

于 2022-08-02 20:08:18 首次发布

本文链接：https://blog.csdn.net/m0_58565372/article/details/126129449

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在项目有时候会遇到，输入框里面的提示字体，要改变颜色、大小等，这时候我们就可以引用以下代码

input::-webkit-input-placeholder{
/* placeholder颜色 */
  color:#FFFFFF;
/* placeholder字体大小 */
font-size:12px
}

这样就可以改变提示字体的颜色和大小了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿wei程序媛

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
input 修改placeholder中颜色和字体大小

在项目有时候会遇到，输入框里面的提示字体，要改变颜色、大小等，这时候我们就可以引用以下代码。这样就可以改变提示字体的颜色和大小了。
复制链接

扫一扫

专栏目录

css自定义占位文本(placeholder)的样式的方法示例

12-10

自定义占位文本(placeholder)的样式当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办? CSS有一个伪元素选择器::placeholder可以解决我们的问题. 用法 HTML <input placeholder="我是红色的！"> CSS input::placeholder { color: red; font-size: 1.2em; font-style: italic; } 结果但要注意, 这个伪元素选择器是一个实验性的特性, 还需要一些时日待浏览器兼容.

微信小程序自定义组件之可清除的input组件

10-18

为了提供更丰富的定制性，可以通过CSS样式表（`.wxss`）对组件进行外观定制，如调整输入框的边框、颜色、字体大小等，以及清除按钮的位置和大小。 6. **组件使用**：在父组件中，通过引用这个自定义组件并设置...

2 条评论您还未登录，请先登录后发表或查看评论

设置输入框input中placeholder的字体颜色、字体大小

最新发布

weixin_44487537的博客

05-07

299

【代码】CSS 样式清单整理：文字超出部分显示省略号。

修改 input 中 placeholder的颜色和 字体大小

weixin_58224449的博客

11-29

9212

【代码】修改 input 中 placeholder的颜色和 字体大小。

微信小程序设置input框placeholder的字体大小

qq_59076775的博客

07-10

5340

微信小程序修改placher的值

css改变placeholder样式

trigger的博客

12-27

4363

placeholder默认样式已经渐渐不能满足开发者的需求，接下来推荐给大家自定义placeholder的样式的方法。方式1：因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。 ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; f...

修改placeholder样式(颜色,字体大小等等)

前端职场小白_炜晨科技的博客

09-23

956

修改placeholder样式(颜色,字体大小等等)

Html5中input的placeholder文字颜色设置

Michael_Gong的专栏

11-03

1万+

input:-webkit-input-placeholder { /* WebKit browsers */ color: #999; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #99

修改输入框placeholder文字默认颜色-webkit-input-placeholder方法

09-28

在Web开发中，用户体验是至关重要的，而输入框（input）的占位符（placeholder）是一个非常实用的功能，它...在实际开发过程中，除了颜色，还可以调整其他样式属性，如字体大小、字体家族、行高等，以满足设计需求。

css3酷炫input框

04-15

7. **自定义占位符**：通过CSS，我们可以修改`placeholder`文本的颜色、大小和位置，使其更符合设计风格。 8. **响应式设计**：利用媒体查询(`@media`)，可以确保input框在不同设备和屏幕尺寸下依然保持良好的显示...

HMTL中的时间控件，页面点击弹出时间选择器

08-02

例如，你可以改变选择器的颜色、字体大小、边框等： ```css .datetimepicker input { font-size: 16px; border: 1px solid #ccc; } .datetimepicker table td.time span { background-color: #f00; /* 修改背景...

input和textarea设置placeholder属性的颜色、字体大小

最初都是小白

06-14

1万+

刚刚拿到一个设计图中的input的placeholder是白色的然后就给大家整理了一下。以下是解决代码： /* WebKit browsers */ input::-webkit-input-placeholder { color: #fff; /* 字体大小直接写样式即可 */ font-size: 28px; } /* Mozilla Firefox 4-18使用...

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

王佳斌

01-30

3628

前言该方法只适用于 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 {

input修改placeholder中颜色和字体大小

weixin_30664615的博客

03-12

324

input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-size: 12px; } 转载于:https://www.cnblogs.com/zhanghua-z...

修改 input / textarea placeholder 属性的颜色和字体大小

weixin_30719711的博客

02-21

2527

话不多说，直接上代码： input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; font-size: 16px; } input::-moz-placeholder, textarea::-moz-placeholder { /* Mozill...

placeholder设置字体大小与颜色

harnican的博客

08-09

1057

很简单就能实现 [textField setValue:[UIColor greenColor] forKeyPath:@"_placeholderLabel.textColor"]; [textField setValue:[UIFont boldSystemFontOfSize:13] forKeyPath:@"_placeholderLabel.font"];

css常用技巧:input提示文字；placeholder字体修改

05-31

要为input添加提示文字，...其中 `::placeholder` 选择器可以选中placeholder，然后可以通过CSS属性修改字体颜色、大小等样式。需要注意的是，不同浏览器对 `::placeholder` 的支持可能有所差异，需要进行兼容性处理。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交