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

enter image description here

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

有办法吗? 我只是使用输入类型date

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

Paulius Dragunas asked 2020-02-12T05:20:31Z
2个解决方案
82 votes

使用伪类-webkit-calendar-picker-indicator为基于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" />
saluce answered 2020-02-12T05:21:29Z
41 votes

要删除清除按钮,请使用以下命令:

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

附带说明一下,要在IE10 +(源代码)中执行此操作,请使用以下命令:

::-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;
}
vee answered 2020-02-12T05:22:08Z
translate from https://stackoverflow.com:/questions/17954966/how-to-get-rid-of-x-and-up-down-arrow-elements-of-a-input-date