微信公众号input type="date"和type="tim

2018-01-16  本文已影响0人  小马儿过重庆

微信公众号使用ionic框架,当使用系统自带的时间选择的时候会出现下拉箭头,影响美观,百度了很多办法,如

::-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 –这是控制清除按钮的

都没有解决,

准确解决办法为

/*时间选择样式*/

.mwq-times input[type="time"],

.mwq-times input[type="date"]

{

    border: none;

    appearance:none;

    -moz-appearance:none;

    -webkit-appearance:none;

    background: none;

  }

.mwq-times input[type="time"]::-ms-expand,

.mwq-times input[type="date"]::-ms-expand{

display: none;

}

微信公众号input type="date"和type="time"清除默认样式

希望能帮到更多的小伙伴

上一篇 下一篇

猜你喜欢

热点阅读