如何摆脱输入日期的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浏览器中设置日期控件的其余部分，我建议您查看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;
}

Answer 3

Chrome浏览器（v79）：

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

Firefox（v73）：

Firefox仅清除日期输入按钮。要删除它，必须填写该字段。

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

Safari（v13）：

Safari不支持type ='date'。