• 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;
    }

  • 相关阅读:
    docker部署Nginx
    docker的常用命令
    centos上安装docker
    springcloud负载均衡及Ribbon
    maven下载私服jar
    spring security异常处理的三种方式
    spring security权限控制
    北京理工大学复试上机--2001A
    北京理工大学复试上机--2000
    PAT1067 试密码 (20分)——测试点4分析 一个易错点
  • 原文地址:https://www.cnblogs.com/yangwenbo/p/9598261.html
Copyright © 2020-2023  润新知