奇奇怪怪,可可爱爱
问题描述:
在移动端有input输入框,但是是禁用的状态,但是默认的字体颜色和大背景颜色又区分不开。想着用 !important强制改掉,在pc端切换成pad模式或者手机模式,显示正常;但是在真正的pad端查看,颜色仍是无变化
问题原因:
移动端环境下android只需设定input的color即可
而ios下input disabled的默认样式会有默认样式opacity以及隐藏样式-webkit-text-fill-color
.el-input input{
color:#323333 !important;
opacity: 1;
-webkit-text-fill-color: #323333;
}
在移动端开发中遇到input禁用状态时字体颜色与背景颜色区分不明显的问题。原因为iOS系统对inputdisabled有默认的样式,包括opacity和-webkit-text-fill-color。为解决此问题,可以设置input的color、opacity和-webkit-text-fill-color属性,并使用!important提高优先级,确保样式生效。然而,此方法在实际pad设备上可能无效。在Android设备上只需设定input的color即可,但iOS设备可能需要更深入的适配策略。
5946





