做有态度的前端团队

网易FEG前端团队

分享几个在开发中遇到的一些小问题

1、修改chrome记住密码后自动填充表单的黄色背景

主要通过input : -webkit-autofill来进行修改!

input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}

2、修改输入框placeholder文字默认颜色-webkit-input-placeholder

input标签的placeholder 属性我们都常用到,它用来显示提示信息。提示会在输入字段为空时显示,并会在字段获得焦点时消失。这很好用。但placeholder 属性对于的样式控制却比较烦人啦。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;

3、iOS safari 阻止“橡皮筋效果”

可以参考一下知乎上的回答 链接在此
但是,我们遇到的问题不是这样,我是要解决弹跳导致弹出层(position:absolute)的覆盖层高度小于100%;

针对这个问题,我想到的解决方案如下:

方法一: 把position:absolute改成position:fixed,并在弹出层之后,设置body的高度是100%;overflow是hidden。

方法二:

思路是获取苹果浏览器导航栏的高度。然后滚动的时候,重新获取其高度。在导航栏高度变小的时候,给弹出层增加高度的百分比!

代码如下:

    //ios safari 伸缩判断
      var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
        $(window).scroll(function () {
           if(agent.indexOf("iPhone")!=-1 || agent.indexOf("iPad")!=-1){
                var topbarHeightNow=window.outerHeight-window.innerHeight;
                if(topbarHeightNow<topbarHeight){
                    globleflag=false
                     //此处写处理逻辑
                }else{
                 globleflag=true  
                    //此处写处理逻辑
               }
            }

手机阅读请扫描下方二维码: