微信小程式-自定義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{
  //樣式
}

示例如下：

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