zoukankan      html  css  js  c++  java
  • 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");
                }
            }); 
  • 相关阅读:
    【待整理】转义字符
    关系运算符 与 逻辑运算符
    浏览器相关
    正则表达式
    样式定义——多重浏览器
    事件
    属性定义
    数组
    日期
    构造函数
  • 原文地址:https://www.cnblogs.com/lw5116/p/7133092.html
Copyright © 2011-2022 走看看