码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-07-07 17:27:44      阅读:2199      评论:0      收藏:0      [点我收藏+]

标签:类型   时间   scss   inpu   移动   无法   解决   日期控件   htm   

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

标签:类型   时间   scss   inpu   移动   无法   解决   日期控件   htm   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!