原地址链接:https://blog.csdn.net/august_leo/article/details/80877382

这是微信小程序input组件的官方文档描述,下图红框里的placeholder-styleplaceholder-class就是微信小程序里用来给placeholder设置样式的属性。

一、使用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{
//样式
}

微信小程序placeholder设置自定义颜色的更多相关文章

  1. 微信小程序wxss设置样式

    微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...

  2. 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法

    微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...

  3. 微信小程序字体设置

    微信小程序css篇----字体(Font) 一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "font-style font-variant font-w ...

  4. 微信小程序----wxss设置样式

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  5. 微信小程序如何设置服务器配置

    最近微信小程序在it界火了起来,公司也要求我们开始接触微信小程序,废话不多说直接从配置微信小程序开始 1,首先,登录 https://mp.weixin.qq.com,(这里默认你已经获取到微信小程序 ...

  6. 微信小程序tabbar设置样式在哪里改

    微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...

  7. 微信小程序:设置启动页面

    一.功能描述 微信小程序启动时,首先运行app.js,然后才跳转到第一个页面,也就是启动界面. 设置启动界面,只需要调整app.json的pages信息的位置,放在第一条的page记录便是启动界面

  8. 微信小程序学习笔记(1)-微信小程序样式设置逻辑

    1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1) ...

  9. 微信小程序高度设置为100%

    在网页中设置body,html{height:100%}; 将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微 ...

随机推荐

  1. 大数据学习之scala-环境搭建

    scala 下载网站 https://www.scala-lang.org/download/ 安装scala要先安装java,并且配置java环境,官网也有说明 不过国内的网站下载不下来可以访问:  ...

  2. 【Java实用工具】——使用oshi获取主机信息

    最近在筹划做一个监控系统.其中就要获取主机信息,其中遇到一些问题.在此做个记录,以便以后查阅. 在该监控系统中,想要做到主机的CPU.内存.磁盘.网络.线程.JVM内存.JVM GC 等维度的监控,J ...

  3. AspNetCore3.1源码解析_2_Hsts中间件

    title: "AspNetCore3.1源码解析_2_Hsts中间件" date: 2020-03-16T12:40:46+08:00 draft: false --- 概述 在 ...

  4. 【猫狗数据集】使用top1和top5准确率衡量模型

    数据集下载地址: 链接:https://pan.baidu.com/s/1l1AnBgkAAEhh0vI5_loWKw提取码:2xq4 创建数据集:https://www.cnblogs.com/xi ...

  5. GO系列 | 5分钟入门GO【译】

    什么是Google Go? Google Go是由Robert Griesmer,Rob Pike和Ken Thompson在Google设计的一种开源编程语言. Go在语法上类似于C语言: 除了内存 ...

  6. Posix线程编程指南(5)

    Posix线程编程指南(5) 杨沙洲 原文地址:http://www.ibm.com/developerworks/cn/linux/thread/posix_threadapi/part5/ 杂项 ...

  7. C++ 【静态成员】static修饰的成员

    首先,我们先通过字面意思来理解... 成员:成员变量.成员函数. static  修饰成员变量,还有修饰成员函数. static  声明为静态的,称为静态成员.不管这个类创建了多少个对象,静态成员只有 ...

  8. Andorid 添加MenuPopup

  9. Cisco 模拟配置

    本次模拟:采用Cisco Packet Tracer 软件,进行cisco网络设备的模拟.可以实现CLI界面命令配置,同实际交换机一样. 1.同一VLAN 可以互相访问,不同VLAN 不能访问 PC0 ...

  10. 【Code Force】Round #589 (Div. 2) D、Complete Tripartite

    题目链接 大致题意 把一个图分成三块,要求任意两块之间是完全图,块内部没有连线 分析 首先根据块内没有连线可以直接分成两块 假定点1是属于块1的,那么所有与点1连接的点,都不属于块1:反之则是块1的 ...