H5自帶的type=date或者month等日期控件移動端顯示placeholder


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");
            }
        }); 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM