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