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

最新推荐文章于 2024-05-07 11:27:35 发布

码小生@是胡

最新推荐文章于 2024-05-07 11:27:35 发布

阅读量9.1k

点赞数 3

文章标签：微信小程序小程序

原文链接：https://www.cnblogs.com/zhongxu6868/articles/15883044.html

版权

**在微信小程序中使用**
 
修改 input 中 placeholder 的字体大小
 
直接在里面添加 style（第一种）（只能修改微信小程序）
<input type="text" placeholder="请搜索商品" placeholder-style="color:red;font-size:28rpx">
 
在里面添加 绑定一个 class  placeholder-class="place"（第二种） （只能修改微信小程序）
<input type="text" placeholder="请搜索商品" placeholder-class="place"></input>
 
<style>
  .place{
     font-size 28rpx
     color red
 }
 
</style>
 
**在 Vue中使用**
 
在 vue中 修改 input 中 placeholder的 颜色和 字体大小
1.style中需要作如下修改：
<style>
input::-webkit-input-placeholder {
    /* placeholder颜色 */
    color: #aab2bd;
    /* placeholder字体大小 */
    font-size: 12px;
}
</style>
 
2.HTML中的代码如下：
<input type="text" placeholder="输入你想要查找的内容" id="groupName">
 
3.同理textarea改变字体的大小和颜色方式：
textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #9c9c9c;
}
textarea:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #9c9c9c;
}
textarea::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #9c9c9c;
}
textarea::-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #9c9c9c;
 
}