美文网首页CSS 样式问题
IOS Input Disabled默认样式问题

IOS Input Disabled默认样式问题

作者: SCQ000 | 来源:发表于2016-12-20 15:55 被阅读3811次

    最近在做项目的时候发现,将inputtextarea设置为disabled后,在iphone手机上样式将被覆写。解决方案就是:

    input:disabled, textarea:diabled {
        -webkit-text-fill-color: #000;
        -webkit-opacity: 1;
        color: #000;
    }
    

    以上样式将覆盖其系统默认设置的值,能够实现android和ios的兼容性。
    其中,-webkit-text-fill-color是用来做填充色使用的,如果有设置这个值,则color属性将不生效。

    这个属性也经常用于制作镂空字体等特效。
    如:

    <div class="demo">
      hello
    </div>
    
    .demo {
      width: 100px;
      height: 100px;
      font-size: 40px;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1px #000; /* 外面描线的样式 */
    }
    

    最终效果如下:

    效果图.png

    相关文章

      网友评论

        本文标题:IOS Input Disabled默认样式问题

        本文链接:https://www.haomeiwen.com/subject/rsxfvttx.html