ios css光标隐藏,ios的input属性Disabled默认样式问题

现象

表单不可编辑状态-ios的input的属性设置为disabled,会造成字体颜色变灰

需求

移动端,浏览个人信息页时,表单内的信息希望是不可编辑不可点状态(readonly属性会另外出现光标)

当点击编辑按钮进入可编辑状态后,姓名和岗位变为可编辑状态,手机仍旧是不可编辑不可点状态

问题描述

对不可编辑不可点的设置,input定义disabled属性

在ios上会出现截图所示,设置的value的值几乎看不见

7747636f7cb6

问题现象

解决办法

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;}

https://www.w3cways.com/1418.html

7747636f7cb6

②设置透明度:

ios默认了disabled属性时透明度为0.3

input:disabled, input[disabled]{ -webkit-opacity:1; opacity: 1; }

http://blog.csdn.net/qq_33008701/article/details/55259734

https://segmentfault.com/q/1010000003782696

7747636f7cb6

在苹果移动端,按钮设为disabled,背景色跟样式表设置的颜色不一致

同时对比disabled 和readonly属性:

disabled 属性规定禁用 input 元素。被禁用的 input 元素既不可用,也不可点击。

readonly属性readonly 属性为只读,但没有禁用,通过表单提交。

拥有disabled属性的表单元素处理页面是获取不到其值的,而readonly则可以

Readonly作用范围:只针对input(text / password)和textarea有效

disabled作用范围:对于所有的表单元素都有效,包括select, radio, checkbox, button

具体区别:http://blog.csdn.net/u011487470/article/details/51371567

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值