html5中去掉input type date默认设置款式的方式

日期:2020-12-12 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

 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 – 操纵年文本, 如20174个字母占有的那片地区
::-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种类更改行高和高宽比那个小3角其实不会依据尺寸调剂,确实太丑了,因此决策把它掩藏掉。

下面的css能够去掉date中左右小3角,可是保存input种类为number的小3角。

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默认设置款式的方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!