html5中如何去掉input type date默认样式

Posted 2023-05-02

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;
参考技术A 那就用jquery插件做日期面板好了。

如何在 iOS 上的 <input type=date> 上注册值更改事件

【中文标题】如何在 iOS 上的 <input type=date> 上注册值更改事件

【英文标题】：How to register for value change events on <input type=date> on iOS

【发布时间】：2012-03-16 15:51:27

【问题描述】：

我正在尝试创建一个 HTML5 输入日期组件，以便我可以利用本机 iOS 日期/时间选择器，并且我正在使用 jquery。我有以下代码来生成组件：

  var $inputDate = $("<input></input>");
  $inputDate.attr("type", "date");
  $inputDate.attr("value", "2004-05-03");
  $inputDate.change(function(event)
  
    console.log("value changed");
  );

代码在本机应用程序的 webkit 组件中运行。输入控件看起来很好，我可以使用选择器更改值。但是，当我更改值并关闭选择器时，不会触发更改功能。当我在 Chrome 的网页中运行它时，一切正常。如何在 iOS 上进行这项工作？

【问题讨论】：

发现其他用户抱怨没有触发更改事件，建议他们改用以下工具包：cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch

感谢您的建议，但使用该工具包并不能提供我们产品所需的语言环境支持。

【参考方案1】：

关闭日期/时间选择器时会调用 onblur 函数。所以这确实有效：

var $inputDate = $("<input></input>");
$inputDate.attr("type", "date");
$inputDate.attr("value", "2004-05-03");
$inputDate.blur(function(event)

  console.log("value changed");
);

在较新版本的 Chrome（和 Android 上的 Chrome）中：

选择日期时调用 onchange 事件 关闭下拉菜单时不会调用 onblur 事件，仅当控件失去键盘焦点时才会调用

这是一个示例，显示使用纯 JavaScript 生成的事件：http://jsbin.com/iximuy/4

【讨论】：

伙计，我把头发扯断了，谢谢你救了我！