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