ios中textarea颜色无法改变问题

2019-04-17  本文已影响0人  Max_Law

在我开发微信公众号的流程页面时,里面有一个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>
上一篇 下一篇

猜你喜欢

热点阅读