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");
            }
        }); 
时间: 2024-12-17 15:24:21

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

WPF: 实现带全选复选框的列表控件

本文将说明如何创建一个带全选复选框的列表控件.其效果如下图:     这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中:反之,取消选中“全选”时,所有项都会被取消勾选. 在列表中选中部分数据项目时,“全选”框会呈现不确定状态(Indetermine). 由此看出,“全选”复选框与列表项中的复选框达到了双向控制的效果. 其设计思路:首先,创建自定义控件(CheckListView),在其 ControlTem

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选

Date Picker和UITool Bar控件简单介绍

Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选择器出来,示例代码

MFC Month Calendar Control 控件使用

在上层软件编程中,往往须要提供一个月历控件让用户选择对应日期或者用此月历控件来强调特定的一天. MFC的 Month Calendar Control 控件自系统升级到 Windows 7 之后,对于日期控件所能做的操作变少了,不能对指定的日期的背景颜色进行更改.在网上查了非常久之后发现是操作系统画图风格的关系. 在这样的情况下. 仅仅能通过加粗特定日期的字体粗细来凸显该日期的不同(至少本人仅仅想到这个办法). 首先拉入 Month Calendar Control 控件,为控件加入一个变量叫做

一个Demo带你认识Design库,纯原生控件也能做出很漂亮的效果

欢迎转载,转载请注明出处http://blog.csdn.net/w804518214/article/details/51340984 不得不说开发者头条的APP真的是Material Design的典范,纯原生控件也能做出很漂亮的效果,并且不需要处理各种复杂的滑动冲突!!其主页基本把Design库的几个控件展示了一遍,今天就顺手借开发者头条主页的实现来简单介绍下官方Design扩展包里几个控件的使用.本文不会详细展开讲每个控件,仅仅针对demo效果的实现,想深入研究的推荐看官方指南! 先上效

Ext带时间选择的日期控件

http://pan.baidu.com/s/1dD997yT 别人已经做好了, 示例用法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Extjs5带时分秒的日期控件

最近做基础平台,做到日期控件这部分,据说Extjs5日期控件是没有时分秒的,在网上找了半天没找到,只找到Extjs4的,参照了下,然后对Extjs5进行了修改. 效果图如下:

手机端input[type=date]的时候placeholder不起作用解决方案

目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,ios和安卓都是支持的,但是当type类型是date的时候placeholder属性又会失效.PC端的chrome默认显示是“年/月/日”,但在移动端就是一片空白了. 移动端自带的日期控件确实是个好东西.让用户填写的时候体验很好,很方便.对前端来说可以省去验证日期格式这一步.这么好的东西怎么能舍弃呢.

Javascript——date日历控件

*功能没全,还需要自己修改 <!DOCTYPE html> <html> <head> <meta content="width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta content="yes" name="apple-mobile