textarea多行文本输入框里的placeholder提示信息在IOS和Android真机上显示不一样，无法统一样式，用户体验不好。
<view class="wrap"> <form bindsubmit="formSubmit" class="formSubmit"> <view class="clearFix"> <text>联系人</text> <input type="text" name="contact" placeholder-style="font-size:16px;color:#ccc;" placeholder="请填写联系人" value="" /> </view> <view class="clearFix"> <text>联系电话</text> <input type="number" name="mobile" placeholder-style="font-size:16px;color:#ccc;" placeholder="请填写联系电话" value="" /> </view> <view class="clearFix"> <text>联系邮箱</text> <input type="text" name="email" placeholder-style="font-size:16px;color:#ccc;" placeholder="请填写联系邮箱" value="" /> </view> <view class="clearFix"> <text>需求描述</text> <textarea style="height:36px;" maxlength="300" name="note" placeholder-style="font-size:16px;color:#ccc;" placeholder="请简要描述您的需求，我们的公关服务人员将尽快与您联系" auto-height value="" /> </view> <view class="btn"> <button formType="submit" type="warn" hover-class="none">我要定制</button> </view> </form></view> |
.wrap{ height: auto; padding: 0 36rpx; border-top: 1px solid #e0e0e0; border-bottom: none;}.clearFix::after{ content: ""; display: block; clear: both;}view{ /* display: flex;*/ border-bottom: 1px solid #f5f5f5;}text{ float:left; width: 150rpx; font-size: 32rpx; letter-spacing: 2rpx; line-height: 90rpx;}input{ float:left; width: 528rpx; height: 90rpx; line-height: 90rpx; font-size: 32rpx; font-family: "Microsoft YaHei"；}.title{ height: auto; min-height: 40rpx; line-height: 40rpx; margin: 0; padding-top: 26rpx;}textarea{ float:left; width: 528rpx; min-height: 416rpx; line-height: 52rpx; /*margin-top: 10rpx;*/ padding-top: 10rpx; font-size: 32rpx;}.btn{ margin-top: 73rpx; justify-content: center; border: none;}.btn button{ font-size: 28rpx;} |
在开发者工具上是这样显示的
在Android真机上是这样的
在IOS上是这样的
三个工具三种不同的显示效果，无法统一，还有placeholder-style的样式行高不起作用，我没有用placeholder-class类去指定placeholder的样式
