今天被测试人员提了个bug:苹果手机浏览器(Chrome)打开h5,控件在input:disabled的样式始终是浅灰色,要求改成黑色。
测试对比:1、在多个pc浏览器上浏览input:disabled的样式时,都是自己修改的黑色,但是在苹果手机上的浏览器Chrome打开就是浅灰色,修改无效。
2、以为苹果浏览器特殊,在mac电脑上sarfri打开h5,显示为修改过的黑色
3、以为是Chrome的问题,在安卓手机Chrome上尝试打开,发现显示正常,为修改过的黑色。
定位为苹果手机的浏览器(Chrome)的特殊性。

后来发现还是 User Agent 样式的问题。
iPhone Safari/webview input disabled 的默认样式:
input:disabled{
opacity: 0.4
}
嗯,开发者工具只能看到这一条。 即便是 reset 为 opacity : 1 也无效。因为还有一条隐藏的样式 -webkit-text-fill-color ,于是有效的样式为 :

input:disabled{
color:"#353535";
opacity: 1;
-webkit-text-fill-color: "#353535";
}

配合使用 -webkit-text-fill-color: "#353535";最终实现了字体颜色的样式修改。

苹果手机Chrome浏览器显示input:disabled时字体颜色总是为浅灰色的更多相关文章

  1. 中文版Chrome浏览器不支持12px以下字体的解决方案

    中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增 ...

  2. 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  3. 改变input的placeholder字体颜色

    改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...

  4. 去掉chrome浏览器中input或textarea在得到焦点时出现黄色边框的方法

    此文来源网络,我转载的原文里的图显示“该图片仅限百度用户内部交流使用”,我估计这篇文章是从百度空间抄过来的,该作者没保留原文地址.所以我在这里也没保留抄袭文章的地址. chrome浏览器不管对于开发者 ...

  5. 去掉chrome浏览器中input获得焦点时的带颜色边框呢

    可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}

  6. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  7. 取消chrome浏览器下input和textarea的默认样式

    最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...

  8. 关闭chrome浏览器的input香蕉黄背景

    chrome浏览器input的自动完成,点击之后自动输入,input的背景会变成香蕉黄,用如下方法修复: /* Change the white to any color ;) 就是给input设置内 ...

  9. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

随机推荐

  1. localStorage本地存储技术

    localStorage 本地存储技术 本地存储技术,“不是永久的永久存储” 特点: 将数据存储到浏览器当中 存储的数据都是以字符串的形式存储的 和传统的数据库相比: 优点: 操作简单,容易学习 数据 ...

  2. JavaScript---动态加载script和style样式

    一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点". 一个基本的网页格式 <!DOCT ...

  3. Spring Boot 2 使用Servlet、Listener和Filter配置

    开发环境:IntelliJ IDEA 2019.2.2Spring Boot版本:2.1.8 新建一个名称为demo的Spring Boot项目. 一.使用Servlet配置 1.修改启动类 Demo ...

  4. Violet音乐社区需求分析说明书

    目录 一.引言 1.1 编写目的 1.2 开发背景 1.3 开发工具 二.项目需求 2.1 角色定义 2.2 模块划分 2.3 功能概述 2.4 数据流图 三.前端页面 四.软件要求 4.1 性能要求 ...

  5. cgo在mac上编译

    用了cgo mac上编译不过的可以试试下面的方法 ../../pkg/mod/github.com/mattn/go-sqlite3@v1.:: fatal error: 'stdlib.h' fil ...

  6. June 30th, 2019. Week 26th, Sunday

    It's so easy to be careless, it takes courage and courage to care. 不在乎很容易,但在乎却需要很多勇气. Sometimes it w ...

  7. 【西北师大-2108Java】第八次作业成绩汇总

    [西北师大-2108Java]第八次作业成绩汇总 作业题目 面向对象程序设计(JAVA)--第10周学习指导及要求 实验目的与要求 (1)掌握java异常处理技术: (2)了解断言的用法: (3)了解 ...

  8. python第一次作业-Numpy练习

    1.创建一个边界值为1而内部都是0的数组,图例如下:[提示:]解此题可以先把所有值都设置为1,这是大正方形:其次,把边界除外小正方形全部设置为0.本题用到numpy的切片原理.多维数组同样遵循x[st ...

  9. Docker安装MySQL 8.0并挂载数据及配置文件

    安装部署环境 Ubuntu 18.04.3 LTS Docker 19.03.2 MySQL latest(8.0.17) 下载镜像 # docker从仓库中拉取最新版的mysql镜像,如果没加标签的 ...

  10. Paper | Highway Networks

    目录 1. 网络结构 2. 分析 解决的问题:在当时,人们认为 提高深度 是 提高精度 的法宝.但是网络训练也变得很困难.本文旨在解决深度网络训练难的问题,本质是解决梯度问题. 提出的网络:本文提出的 ...