• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5中去掉input type date默认样式的方法

     html5中如何去掉input type date默认样式,下面通过本文给大家详细介绍,具体介绍如下所示:

    2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:

    ::-webkit-datetime-edit – 控制编辑区域的
    ::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的
    ::-webkit-datetime-edit-text – 这是控制年月日之间的斜线或短横线的
    ::-webkit-datetime-edit-month-field – 控制月份
    ::-webkit-datetime-edit-day-field – 控制具体日子
    ::-webkit-datetime-edit-year-field – 控制年文字, 如2017四个字母占据的那片地方
    ::-webkit-inner-spin-button – 这是控制上下小箭头的
    ::-webkit-calendar-picker-indicator – 这是控制下拉小箭头的
    ::-webkit-clear-button –这是控制清除按钮的

    以下的囊括了date,datetime,week,time所用的伪元素:

    input::-webkit-datetime-edit{}
    input::-webkit-datetime-edit-fields-wrapper{}
    input::-webkit-datetime-edit-ampm-field{}
    input::-webkit-datetime-edit-day-field{}
    input::-webkit-datetime-edit-hour-field{}
    input::-webkit-datetime-edit-millisecond-field{}
    input::-webkit-datetime-edit-minute-field{}
    input::-webkit-datetime-edit-month-field{}
    input::-webkit-datetime-edit-second-field{}
    input::-webkit-datetime-edit-week-field{}
    input::-webkit-datetime-edit-year-field{}
    input::-webkit-datetime-edit-ampm-field:focus{}
    input::-webkit-datetime-edit-day-field:focus{}
    input::-webkit-datetime-edit-hour-field:focus{}
    input::-webkit-datetime-edit-millisecond-field:focus{}
    input::-webkit-datetime-edit-minute-field:focus{}
    input::-webkit-datetime-edit-month-field:focus{}
    input::-webkit-datetime-edit-second-field:focus{}
    input::-webkit-datetime-edit-week-field:focus{}
    input::-webkit-datetime-edit-year-field:focus{}
    input::-webkit-datetime-edit-year-field[disabled]{}
    input::-webkit-datetime-edit-month-field[disabled]{}
    input::-webkit-datetime-edit-week-field[disabled]{}
    input::-webkit-datetime-edit-day-field[disabled]{}
    input::-webkit-datetime-edit-ampm-field[disabled]{}
    input::-webkit-datetime-edit-hour-field[disabled]{}
    input::-webkit-datetime-edit-millisecond-field[disabled]{}
    input::-webkit-datetime-edit-minute-field[disabled]{}
    input::-webkit-datetime-edit-second-field[disabled]{}
    input::-webkit-datetime-edit-text{}
    input::-webkit-inner-spin-button{}
    input::-webkit-calendar-picker-indicator{}
    input::-webkit-calendar-picker-indicator:hover{}

    date类型改变行高和高度那个小三角并不会根据大小调整,实在太丑了,所以决定把它隐藏掉。

    下面的css可以去掉date中上下小三角,但是保留input类型为number的小三角。

    input[type=date]::-webkit-inner-spin-button { visibility: hidden; }

    input类型为date的输入框有以下属性,可以根据自己的需求自行调整。

    ::-webkit-datetime-edit { padding: 1px; background: url(../selection.gif); }
    ::-webkit-datetime-edit-fields-wrapper { background-color: #eee; }
    ::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; }
    ::-webkit-datetime-edit-year-field { color: purple; }
    ::-webkit-datetime-edit-month-field { color: blue; }
    ::-webkit-datetime-edit-day-field { color: green; }
    ::-webkit-inner-spin-button { visibility: hidden; }
    ::-webkit-calendar-picker-indicator {
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: inset 0 1px #fff, 0 1px #eee;
    background-color: #eee;
    background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
    color: #666;
    }

    总结

    以上所述是小编给大家介绍的html5中去掉input type date默认样式的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    上一篇:canvas粒子动画背景的实现示例
    下一篇:html5新特性与用法大全
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5中去掉input type date默认样式的方法 html5,中,去掉,input,type,date,