html - 如何摆脱输入日期的 x 和向上/向下箭头元素？

Question

我唯一需要显示在框中的是橙色三角形，我不确定是否需要 CSS 或其他东西来摆脱三角形左侧的两个元素。

有没有办法这样做？我只是使用输入类型date。

小提琴：http: //jsfiddle.net/5M2PD/1/

Answer 1

使用伪类-webkit-inner-spin-button为基于 webkit 的浏览器设置样式：

http://jsfiddle.net/5M2PD/2/

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

如果要更改下拉箭头的样式，请使用伪类-webkit-calendar-picker-indicator：

input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

要消除清除按钮，请将输入设置为 required：

http://jsfiddle.net/5M2PD/3/

<input type="date" required="required" />

Answer 2

要删除清除按钮，请使用以下命令：

::-webkit-clear-button
{
    display: none; /* Hide the button */
    -webkit-appearance: none; /* turn off default browser styling */
}

附带说明一下，要在 IE10+ ( source ) 中执行此操作，请使用以下命令：

::-ms-clear { }

请注意，这适用于<input type="text" />，因为 IE 现在也在那里放置了一个清除按钮。

要在 WebKit 浏览器中设置其余日期控件的样式，我建议您查看此链接。总结一下，您可以使用以下伪类：

::-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 { }
::-webkit-inner-spin-button { }
::-webkit-calendar-picker-indicator { }

我还强烈建议使用以下内容来关闭默认浏览器样式；我发现这在使用移动浏览器时特别有用：

input[type="date"]
{
    -webkit-appearance: none;
}

Answer 3

铬（v79）：

input[type='date']::-webkit-clear-button,
input[type='date']::-webkit-inner-spin-button {
    display: none;
}

火狐 (v73):

Firefox 只有用于日期输入的清除按钮。要删除它，应将该字段设为必填。

<input type=’date’ required=’required’ />

野生动物园（v13）：

Safari 不支持 type='date'。

Answer 4

删除输入类型日期的 (x)。仅适用于 Internet Explorer。

.input_base input[type="date"]::-ms-clear {
  display: none;
}