美文网首页
ios中textarea颜色无法改变问题

ios中textarea颜色无法改变问题

作者: Max_Law | 来源:发表于2019-04-17 14:58 被阅读0次

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

    相关文章

      网友评论

          本文标题:ios中textarea颜色无法改变问题

          本文链接:https://www.haomeiwen.com/subject/dlhnwqtx.html