Html 如何摆脱输入日期的 x 和向上/向下箭头元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17954966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get rid of x and up/down arrow elements of a input date?
提问by Paulius Dragunas
The only thing that I need showing up in the box there is the orange triangle, and I am not sure if I need CSS or something else to get rid of the two elements to the left of the triangle.
我唯一需要在框中显示的是橙色三角形，我不确定是否需要 CSS 或其他东西来摆脱三角形左侧的两个元素。
Is there a way to do so? I am just using the input type date.
有没有办法这样做？我只是使用输入类型date。
Fiddle: http://jsfiddle.net/5M2PD/1/
回答by saluce
Use the pseudo-class -webkit-inner-spin-buttonto style it specific for webkit-based browsers:
使用伪类-webkit-inner-spin-button来设置特定于基于 webkit 的浏览器的样式：
input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
If you want to change the style of the dropdown arrow, use the pseudo-class -webkit-calendar-picker-indicator:
如果要更改下拉箭头的样式，请使用伪类-webkit-calendar-picker-indicator：
input[type=date]::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
display: none;
}
To eliminate the clear button, set the input to required:
要消除清除按钮，请将输入设置为所需：
<input type="date" required="required" />
回答by vee
To remove the clear button, use this:
要删除清除按钮，请使用以下命令：
::-webkit-clear-button
{
display: none; /* Hide the button */
-webkit-appearance: none; /* turn off default browser styling */
}
As a side note, to do this in IE10+ (source), use this:
作为旁注，要在 IE10+ ( source) 中执行此操作，请使用以下命令：
::-ms-clear { }
Note that this one works on <input type="text" />, since IE now places a clear button there as well.
请注意，这个适用于<input type="text" />，因为 IE 现在也在那里放置了一个清除按钮。
To style the rest of the date control in WebKit browsers, I would recommend having a look at this link. To summarize it, you can play with the following pseudo classes:
要在 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 { }
I would also highly recommend using the following in order to turn off the default browser styles; I've found this to be especially useful when working with mobile browsers:
我还强烈建议使用以下内容来关闭默认浏览器样式；我发现这在使用移动浏览器时特别有用：
input[type="date"]
{
-webkit-appearance: none;
}
回答by Namitha Reval
Chrome (v79):
铬 (v79)：
input[type='date']::-webkit-clear-button,
input[type='date']::-webkit-inner-spin-button {
display: none;
}
Firefox (v73):
火狐 (v73)：
Firefox has only the clear button for date inputs. To remove it, the field should be made required.
Firefox 只有日期输入的清除按钮。要删除它，该字段应该是必需的。
<input type='date' required='required' />
Safari (v13):
Safari (v13)：
Safari doesn't support type='date'.
Safari 不支持 type='date'。
