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

【问题标题】：How to get rid of x and up/down arrow elements of a input date?如何摆脱输入日期的 x 和向上/向下箭头元素？
【发布时间】：2013-07-31 01:38:54
【问题描述】：

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

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

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

【问题讨论】：

我想保留箭头，但去掉另外两个

标签： html css input

【解决方案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;
}

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

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

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

【讨论】：

谢谢。但是 x 元素仍然存在，我不确定它到底叫什么，所以我真的不知道要搜索什么，所以找到合适的 webkit 名称。
在输入元素中添加required="required"
不幸的是……如果你真的不希望它是必需的，实际上没有任何方法可以删除 webkit 浏览器中的清除按钮。
谢谢！另外，如果我想用向下的人字形替换 ::-webkit-calendar-picker-indicator，这可能吗？我正在看这个：davidwalsh.name/webkit-appearance，似乎没有一个有用的选项
有 mozilla 等价物吗？ nm，firefox 不会在其中添加奇怪的东西。

【解决方案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 浏览器中设置其余日期控件的样式，我建议您查看 this link。总结一下，你可以玩一下以下伪类：

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

【讨论】：

我可以设置::-webkit-calendar-picker-indicator 类的样式以使用我自己的图像而不是三角形吗？

【解决方案3】：

Chrome (v79)：

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

火狐（v73）：

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

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

Safari (v13)：

Safari 不支持 type='date'。

【讨论】：

【解决方案4】：

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

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

【讨论】：