Html 如何去除输入日期中的x和上/下箭头元素？

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

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

date

---

Fiddle:

使用伪类

-webkit内部旋转按钮

为基于webkit的浏览器设置特定样式：

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

input[type=date]：-webkit内部旋转按钮{
-webkit外观：无；
显示：无；
}

如果要更改下拉箭头的样式，请使用伪类

-webkit日历选择器指示器
：

输入[type=date]：-webkit日历选择器指示器{
-webkit外观：无；
显示：无；
}

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


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

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

::-ms-clear { }

作为旁注，要在IE10+（）中执行此操作，请使用以下命令：

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

::-ms-clear { }

请注意，这一条适用于
，因为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;
}

铬（v79）：

Firefox（v73）：

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

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



Safari（v13）：

Safari不支持type='date'。
我想保留箭头，但去掉其他2个箭头。但是x元素仍然存在，我不确定它到底被称为什么，所以我真的不知道要搜索什么，所以请为它找到合适的webkit名称。将
required=“required”
添加到输入元素不幸的是，如果您实际上不希望它是必需的，在webkit浏览器中，实际上没有任何方法可以删除“清除”按钮。谢谢！。另外，如果我想用向下的V形符号替换：--webkit日历选择器指示器，这可能吗？我在看这个：似乎没有一个有用的选择有mozilla的等价物吗？nm，firefox没有在其中添加wierd内容。我可以设置
：-webkit日历选取器指示器的样式以使用我自己的图像而不是三角形吗？