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博客

相关推荐
mayaairi19 分钟前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen1 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马2 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒2 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端
乘风gg2 小时前
DeepSeek V4.1 Flash 来了,明天中午 Flash 降价 60%
前端·ai编程·claude
默_笙3 小时前
❗ 给金鱼装记忆(上):从白板到笔记本,AI 的短期记忆生存指南
前端·javascript
酷酷的逗逗乐3 小时前
前端转 Agent 开发 · 第五节:Memory 会话记忆
前端·程序员
掘金挖土3 小时前
前端手摸手跑路之 AI 应用开发(二)
前端·后端
mayaairi4 小时前
Vue2 组件通讯(四):v-model、scoped样式、mixins与plugins
前端·javascript·vue.js
梦曦i4 小时前
@meng-xi/uni-router 未来展望:夯实基础、深化体验、探索前沿
前端·uni-app