苹果手机Chrome浏览器显示input:disabled时字体颜色总是为浅灰色

摘要:
今天,测试人员提出了一个错误:当iPhone浏览器打开到h5时,输入中的控件始终为浅灰色:禁用样式,需要更改为黑色。iPhoneSafari/webview的默认样式inputdisabled:input:disabled{opacity:0.4}开发人员只能看到这个。即使重置为不透明度:1,它也是无效的。因为还有一个隐藏样式-webkit文本填充颜色,所以有效的样式是:input:disabled{color:“#3353535”;opacity:1;-webkit text fill color:“#5353535;}与-webkit文本填充颜色一起使用:“#3353535”;最后,实现了字体颜色的样式修改。

今天被测试人员提了个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时字体颜色总是为浅灰色》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android国行手机使用Google Play Store将json文件转换成insert语句的sql文件下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

前端知识控制input按钮的显示与隐藏

1 if(fm.ReadFlag.value=="readonly"){ 2 var arr = document.getElementsByTagName("input") 3 for (var int =0; int < arr.length ; int ++){ 4 arr[int]....

NODEJS文件上传

基于NodeJs的文件上传 kamiSDY 0.7612018.04.02 22:38:00字数 785阅读 19,969 最近,自己玩nodeJs,用上了Express框架,小白。上传文件,查了写资料。发现了有req.files这个接口,然后试了下。 使用req.files Express默认的上传路径为/tmp。如果是windows系统,会有报错。...

xenserver 通过防火墙禁用xencenter VM控制台方法

#!/bin/sh #ver 0.1 0706/2017hayden #this script fordisable Xenserver VM VNC Console port #yelang007sheng@163.com start_iptables(){ xen_ver=`cat /etc/redhat-release |awk '{pri...

打开chrome 应用商店

https://zhuanlan.zhihu.com/p/113207558 欢迎来到教学星球,我们一起终生学习。今天我们来说说如何访问谷歌网上应用商店。有了谷歌网上应用商店之后,才能为你的浏览器各种赋能。 首先需要安装一个谷歌浏览器,下载地址:https://www.google.cn/intl/zh-CN/chrome/ 安装好谷歌浏览器之后,下载一个...

input输入框联想功能

一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的问题。还是直接上代码吧。 首先是一个简单的界面 auto.jsp <%@ page language="java" contentType="text/...

将你的苹果变成“猫”:电脑上网巧用iPhone

导语:如果以为你的iPhone只能用来在手机上简单地浏览网页,那可就太浪费它了。其实它无处不在的接入能力,也可以帮你的电脑随时上网。快将这个大苹果变成你的小“猫”吧! 假如你有一部能上网的iPhone,除了能用iPhone上网冲浪之外,还能将iPhone变成一只猫、让电脑分享iphone的网络上网,方法是电脑选择USB、蓝牙或者Wi-Fi方式连接iPhon...