首页 > 移动平台 > 详细

H5自带的type=date或者month等日期控件移动端显示placeholder

时间:2017-07-07 17:08:54      阅读:986      评论:0      收藏:0      [点我收藏+]

H5自带的type=date或者month等日期控件移动端placeholder会无法显示

解决方法:

html部分

<li class="info-item select-item">
    <input type="month" class="info-input time" placeholder="*入学时间" id="time-sel">
    <span class="icon icon-menu-down"></span>
</li>

css部分

input[type="date"]:before{
    color:#b2b2b2;
    content:attr(placeholder);
}


input[type="date"].full:before {
    color:black;
    content:""!important;
}

scss写法

/* 解决input为month类型时的placeholder问题 */
input[type="month"]{
    &:before{
        color:#b2b2b2;
        content:attr(placeholder);        
    }

    &.full{
        &:before{
            color:black;
            content:""!important;            
        }
    }
}

js部分

        //选择入学时间解决input为month类型时placeholder的问题
        $("#time-sel").on("input",function(){
           if($(this).val().length>0){
                $(this).addClass("full");
            }else{
                $(this).removeClass("full");
            }
        }); 

 

H5自带的type=date或者month等日期控件移动端显示placeholder

原文:http://www.cnblogs.com/lw5116/p/7133092.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!