H5內建的type=date或者month等日期控制項移動端顯示placeholder

標籤：類型   時間   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