需求
移动端,浏览个人信息页时,表单内的信息希望是不可编辑不可点状态(readonly属性会另外出现光标)
当点击编辑按钮进入可编辑状态后,姓名和岗位变为可编辑状态,手机仍旧是不可编辑不可点状态
问题描述
对不可编辑不可点的设置,input定义disabled属性
在ios上会出现截图所示,设置的value的值几乎看不见
解决办法
1.解决的办法是不用disabled,用readonly属性(readonly属性会额外出现光标,另行处理)
2.解决办法,设置字体颜色,并对透明度设置为1
#判断使用disabled属性时,优先选择
①设置颜色:
color改变disabled下的字体颜色,text-fill-color用来做填充色使用,如果有设置这个值,则color属性将不生效。 解决ios的value值颜色(详情见修改颜色需要同时利用两个属性)
input:disabled, input[disabled]{ color:#8d9399;-webkit-text-fill-color:#8d9399;}
②设置透明度:
ios默认了disabled属性时透明度为0.3
input:disabled, input[disabled]{ -webkit-opacity:1; opacity: 1; }
作者:Dorazzz
链接:https://www.jianshu.com/p/7747636f7cb6