CSS:浏览器设置placeholder样式 / 微信小程序设置placeholder样式

一、web 设置placeholder

设置浏览器的placeholder样式

css 复制代码
::-webkit-input-placeholder { /* WebKit browsers */
    color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999;
}

二、微信小程序设置placeholder

在小程序中设置placeholder样式需要使用组件的内置属性。可以通过以下方式设置input和textarea的placeholder样式:

html 复制代码
<!-- input组件 -->
<input placeholder-style="color:#999;font-size:14px;" />

<!-- textarea组件 -->
<textarea placeholder-style="color:#999;font-size:14px;"></textarea>

在上面的示例中,placeholder-style属性被设置为一个字符串,包含了CSS样式。在这个字符串中,您可以设置任何CSS样式属性,例如颜色、字体大小、字体样式等。

请注意,这些属性仅适用于placeholder文本,而不是输入的文本。如果您需要设置输入文本的样式,应该将样式应用到输入框或文本域本身。

三、欢迎交流指正

参考链接

关于微信小程序设置placeholder样式最简便操作_善良美丽大方可爱真棒的博客-CSDN博客

设置placeholder属性样式的多种写法_placeholder样式_李梅思的博客-CSDN博客

相关推荐
Lee川21 小时前
Milvus 实战:当 RAG 遇上向量数据库,从"玩具 Demo"到"生产可用的"那一步
前端·数据库·人工智能
anOnion1 天前
构建无障碍组件之Toolbar Pattern
前端·html·交互设计
惊鸿一博1 天前
图标加载方式_zeroIcon_是否加前缀mdi
开发语言·前端·javascript
2501_940041741 天前
前端工程化进阶:5个高交互与可视化项目提示词
前端
你很易烊千玺1 天前
JS 异步 从零讲(大白话 + 真实场景 + 可运行案例)
前端·javascript·vue.js
why技术1 天前
AI Coding开始进入第四个时代,我还没上车呢!
前端·人工智能·后端
大家的林语冰1 天前
CSS 已死?DOM 性能黑洞!Pretext 排版革命让你在文本间跳舞,没有 DOM 也能纵享丝滑~
前端·javascript·css
vipbic1 天前
我也该升级了,陪伴了我7年的博客
前端
Lee川1 天前
RAG 实战:从一篇掘金文章出发,拆解检索增强生成的全链路
前端·人工智能·后端
Lee川1 天前
MCP 高德地图实战:当 AI 学会使用工具,一个协议如何重塑大模型的行动边界
前端·人工智能·后端