解决iOS h5 input设置disabled后颜色变浅兼容问题

本文由 小熊 于 2020年09月22日 发布在 未名 共 0 条评论

问题描述

最近在使用Taro多端开发项目,编译成h5后,引用的Taro UI InputNumber 输入框组件设置disabledInput属性后,在iOS浏览器下input输入框文字呈灰色。经测试,Android和PC端不存在此问题,并且通过css给input设置字体颜色后依然无效。

问题原因

通过排查,发现在iOS webview User Agent 里 input disabled 有一个默认样式:

input:disabled {
    opacity: 0.4;
}

原以为reset这条css样式为opacity: 1;即可解决,然而并没有。经过一顿操作发现还有一条隐藏的样式 -webkit-text-fill-color,于是乎最终解决方案如下。

解决方案

1、设置颜色

color改变disabled下的字体颜色,-webkit-text-fill-color用来做填充色使用。

input:disabled, input[disabled], input.disabled {
    color: #333333;
    -webkit-text-fill-color: #333333;
}

以上样式将覆盖其系统默认设置的值,能够实现Android和iOS的兼容性。

其中-webkit-text-fill-color是用来做填充色使用的,如果有设置这个值,则color属性将不生效。

这个属性也经常用于制作镂空字体等特效,如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text fill color</title>
    <style type="text/css">
        .text-fill-color {
            width: 300px;
            height: 100px;
            line-height: 100px;
            font-size: 40px;
            text-align: center;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 1px #000; /* 外面描线的样式 */
        }
    </style>
</head>
<body>
    <div class="text-fill-color">text fill color</div>
</body>
</html>

最终效果如下:

2、设置透明度

input:disabled, input[disabled], input.disabled {
    opacity: 1;
}

最终代码:

input:disabled, input[disabled], input.disabled {
    color: #333333;
    -webkit-text-fill-color: #333333;
    opacity: 1;
}

//(本篇完)

发表评论

电子邮件地址不会被公开。 必填项已用*标注