今天被测试人员提了个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. MySQL数据库:数据的概念

    基本定义 数据:是数据库总存储的基本对象 定义:描述客观事物的符号记录 种类:数字.文字.图形.图像.声音等 数据库:DB 存储数据的集合 数据库管理系统:DBMS 用户和操作系统之间的一层数据管理软 ...

  2. Android实现九宫拼图过程记录

    算法老师给了一份关于九宫拼图的算法过程用C++写的,让我们自己封装,成为一个有图形界面的工程,我接触过android,c++的mfc,Java的图形界面JUI,网页的css.html.javascri ...

  3. 微信小程序开发者工具构建npm提示没找到node_modules目录

    一.官网给的文档写的不够充分,需要你充分理解npm的使用方法,才能明白的: 二.第一步:先在你电脑上安装npm 参考下面文章 https://www.cnblogs.com/zmdComeOn/p/1 ...

  4. June 16th, 2019. Week 25th, Sunday.

    I can fly higher than an eagle, for you are the wind beneath my wings. 我之所以能飞得比鹰还高,是因为有你做我羽翼下的风. You ...

  5. vue踩坑--细节决定成败

    1.错误示例 . 2.错误的地方 3.修改后代码 4.错误分析

  6. 关于rabbitmq

    关于rabbitmq 1 简单介绍rabbitmq RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件).RabbitMQ服务器是用Erlang语言编写的,而 ...

  7. 2019 CVPR 基于GAN的ImageCaptioning论文

    1.MSCap: Multi-Style Image Captioning with Unpaired Stylized Text 生成多种风格的caption 当前的image captioning ...

  8. Java 的synchronized关键字使用

    synchronized 关键字是实现锁的一种方式,是在jvm层面实现的非公平锁,以下是使用synchronized的四种方式 synchronized 特性: 1.非公平锁 2.可重入性 1.作用在 ...

  9. 使用docker运行springboot项目

    本文主要讲的是使用docker运行springboot项目 获取一个springboot项目 这里我没有重新构建,用的之前写的一个项目,直接从github上下载下来,地址:https://github ...

  10. C# Stack 集合学习

    Stack 集合学习 学习自:博客园相关文章 Stack<T>集合 这个集合的特点为:后进先出,简单来说就是新元素都放到第一位,而且顺序移除元素也是从第一位开始的. 方法一:Push(T ...