微信小程序-自定义placeholder颜色和样式

￡神魔★判官ぃ 2022-04-04 05:15 1962阅读 0赞

一、使用placeholder-style设置样式  
placeholder-style相当于在标签的style属性，可直接在标签内设置。

用法：

<input type="text" placeholder="请输入" placeholder-style="color:#e2e2e2;"></input>

wxml代码：

<input type="text" placeholder="请输入" placeholder-style="color:#000;"></input>

wxss代码：

input{
      width: 300rpx;
      border: 2rpx solid #000;
      margin: 50rpx auto;
      border-radius:10rpx; 
    }

二、使用placeholder-class设置样式

wxml代码：

<input type="text" placeholder="请输入" placeholder-class="placeholderStyle"></input>

wxss代码：

.placeholderStyle{
      //样式
    }

示例如下：

wxml代码：

<input type="text" placeholder="请输入" placeholder-class="placeholderStyle"></input>

wxss代码：

input{
      width: 300rpx;
      border: 2rpx solid #000;
      margin: 50rpx auto;
      border-radius:10rpx; 
    }
    .placeholderStyle{
      color:#000;
      font-size: 26rpx;
    }

转载地址：[https://blog.csdn.net/august\_leo/article/details/80877382\#comments][https_blog.csdn.net_august_leo_article_details_80877382_comments]

[https_blog.csdn.net_august_leo_article_details_80877382_comments]: https://blog.csdn.net/august_leo/article/details/80877382#comments

发表评论取消回复

表情：

评论列表（有 0 条评论，1962人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序修改input中的placeholder字体颜色

wxml <input class="search-size" confirm-type="search" value="{ {inputValu

朱雀/ 2023年07月25日 09:29/ 0 赞/ 316 阅读

相关微信小程序自定义组件

[https://blog.csdn.net/melovemingming/article/details/82712601][https_blog.csdn.net_melo

刺骨的言语ヽ痛彻心扉/ 2022年12月24日 15:49/ 0 赞/ 280 阅读

相关小程序placeholder设置自定义颜色

wxml代码： <view class='inp'> <input placeholder-class="phcolor" class="inp

系统管理员/ 2022年11月22日 10:13/ 0 赞/ 198 阅读

相关【微信小程序】自定义radio的默认样式和图标

注意： [components使用radio原生组件修改样式无效][components_radio] 代码片段： /radio未选中时样式 / radi

落日映苍穹つ/ 2022年11月09日 00:56/ 0 赞/ 432 阅读

相关微信小程序中placeholder的样式

通常，现代浏览器大多支持::placeholder选择器，用于设置placeholder的样式，但是在微信小程序中并不支持这种方式，而是提供了一个专门的属性（placehold

悠悠/ 2022年05月26日 09:30/ 0 赞/ 246 阅读

相关微信小程序-自定义placeholder颜色和样式

自定义placeholder颜色和样式如图，这是微信小程序input组件的官方文档描述，下图红框里的`placeholder-style`和`placeholder-c

骑猪看日落/ 2022年05月21日 06:12/ 0 赞/ 824 阅读

相关微信小程序placeholder设置自定义样式

<view class="container"> <input placeholder="请输入" placeholder-class="phcolor" /> </vi

墨蓝/ 2022年05月12日 01:20/ 0 赞/ 226 阅读

相关微信小程序-自定义placeholder颜色和样式

一、使用placeholder-style设置样式 placeholder-style相当于在标签的style属性，可直接在标签内设置。用法： <input

￡神魔★判官ぃ/ 2022年04月04日 05:15/ 0 赞/ 1963 阅读

相关微信小程序（14）——自定义按钮样式

微信小程序自带有button按钮，而button按钮中的某些类型也被赋予特殊意义，比如：获取用户信息、意见反馈等。当我们需要用到这些特殊意义的按钮时，有时需要自定义按钮的样

男娘i/ 2022年02月16日 18:06/ 0 赞/ 1525 阅读

相关微信小程序——自定义tabbar样式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

矫情吗；*/ 2021年07月26日 01:52/ 0 赞/ 709 阅读