ios中textarea颜色无法改变问题

在我开发微信公众号的流程页面时,里面有一个textarea的输入框,无论我怎么修改样式,发现他的文字颜色一直都未灰色,如图:

备注为 textarea

但是Android却没有什么问题,最后才发现原来是 disable 惹的祸,在ios系统下disable是有默认样式的。

<textarea class="readTextarea" v-if='childReadonly' maxlength='200' disable ></textarea>

我本意是想着在详情查看页并不希望他选中 textarea 的,(因为使用 readonly 是可以被选中的)这才使用 disable 的,下面给出两个解决方案:

###1. 采用readonly代替disable
<textarea class="readTextarea" v-if='childReadonly' maxlength='200' readonly="readonly"></textarea>
同时修改选中后的样式

<style>
textarea{
  width: 100%;
  color: #333;
  font-size: 16px;
  font-family: PingFang SC, STHeitiSC-Light, Helvetica-Light, arial, sans-serif;
  border: none;
  outline: none;  /* 最重要是这个outline */
  background-color: white;
}
</style>

不过,用户仍然可以使用 tab 键切换到该字段,就是下图的ios端虚拟键盘上方的上下按钮

弹出键盘后

###2. 修改系统默认的disable样式

<style>
input:disabled, textarea:diabled {
    -webkit-text-fill-color: #333;
    -webkit-opacity: 1;
    color: #333;
}
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值