ios中textarea颜色无法改变问题

最新推荐文章于 2024-08-22 12:44:34 发布

Max_Law

最新推荐文章于 2024-08-22 12:44:34 发布

阅读量927

点赞数

分类专栏： Hybrid 文章标签： Hybrid

本文链接：https://blog.csdn.net/Max_Law/article/details/89469346

版权

Hybrid 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文探讨了在iOS系统下微信公众号开发中textarea输入框文字颜色默认为灰色的问题，提供了两种解决方案：一是用readonly替代disable并调整选中样式；二是自定义disable状态下的样式。

摘要由CSDN通过智能技术生成

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