ios的input属性Disabled默认样式问题

现象

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

需求

移动端,浏览个人信息页时,表单内的信息希望是不可编辑不可点状态(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;}

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


②设置透明度:

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


在苹果移动端,按钮设为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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,735评论 3 184
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 4,721评论 0 1
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,676评论 1 41
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,693评论 7 249
  • 周六早上,汪导拍戏缺人,我处于好奇乐癫癫跑来番禺店帮忙,还给我一个特高大上的名字——“制片”,所谓的制片,其实就是...
    春姬阅读 1,477评论 2 2

友情链接更多精彩内容