Javascript 将日期输入三角形更改为日历图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29436074/
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
Change date input triangle to a calendar icon
提问by Ilan Biala
Right now I'm focusing on getting the input[type="date"]in Google Chrome to display a calendar icon (.png) instead of the downwards triangle that it uses by default. I've tried to do something with styling the Shadow elementsinside the input, but that requires I shift around all the other elements and since those are using flexbox, it doesn't seem very simple. I'm looking to also have the calendar icon be shown all the time, but I haven't figured out a way to do that yet.
现在我专注于让input[type="date"]Google Chrome 显示日历图标 (.png) 而不是它默认使用的向下三角形。我试图对输入中的 Shadow 元素进行样式设置，但这需要我移动所有其他元素，并且由于这些元素使用的是 flexbox，所以看起来并不简单。我还希望始终显示日历图标，但我还没有想出一种方法来做到这一点。
回答by Oscar Fuquen
The code below works for me
下面的代码对我有用
input[type="date"]::-webkit-calendar-picker-indicator {
color: rgba(0, 0, 0, 0);
opacity: 1;
display: block;
background: url(https://mywildalberta.ca/images/GFX-MWA-Parks-Reservations.png) no-repeat;
width: 20px;
height: 20px;
border-width: thin;
}<input type="date" />回答by Aweary
给你。
Chrome provides pseudo-elements for their date picker. We can use ::-webkit-calendar-picker-indicatoralong with another pseudo-element on thatelement to hide the current triangle and overlay a PNG of our choosing.
Chrome 为其日期选择器提供了伪元素。我们可以使用::-webkit-calendar-picker-indicator上与其他伪元素沿着该元素隐藏当前三角形和覆盖我们选择的PNG。
::-webkit-calendar-picker-indicator {
color: rgba(0, 0, 0, 0);
opacity: 1
}
::-webkit-calendar-picker-indicator::after {
content: '';
display: block;
background: url(/*yourURLHere*/) no-repeat;
background-size: 10%;
width: 100px;
height: 100px;
position: absolute;
transform: translateX(-2%);
}
You can tweak the positioning and all that yourself, but the main thing you have to do is make the current indicator clear by setting its alphachannel to 0, then adding a pseudo element after the indicator element that will display your png.
您可以自己调整定位和所有这些，但您必须做的主要事情是通过将其alpha通道设置为 0 来清除当前指示器，然后在将显示 png 的指示器元素之后添加一个伪元素。
You can also make the icon visible at all times by setting the opacityto 1.
您也可以通过设置使该图标在任何时候都可见opacity到1。
回答by curiosity26
@Aweary has the best example, but Chrome 59 doesn't like using ::after on ::-webkit-calendar-picker-indicator. So here's an adjustment I made using FontAwesome icons that achieves the same goal.
@Aweary 有最好的例子，但 Chrome 59 不喜欢在 ::-webkit-calendar-picker-indicator 上使用 ::after。所以这是我使用 FontAwesome 图标进行的调整，以实现相同的目标。
input[type="date"] {
position: relative;
padding: 10px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
color: transparent;
background: none;
z-index: 1;
}
input[type="date"]:before {
color: transparent;
background: none;
display: block;
font-family: 'FontAwesome';
content: '\f073';
/* This is the calendar icon in FontAwesome */
width: 15px;
height: 20px;
position: absolute;
top: 12px;
right: 6px;
color: #999;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<input type="date">回答by Simon Watson
A more cross browser alternative would be to position a calendar icon over top of the triangle calendar picker indicator and then set the calendar icon to pointer-events: nonewhich will cause all click events to be passed through to the triangle calendar picker indicator underneath. I'm not entirely sure how consistent the position of the calendar picker indicator is in different browsers but it should be pretty similar. See the example below.
更跨浏览器的替代方法是将日历图标放置在三角形日历选择器指示器的顶部，然后设置日历图标pointer-events: none，将导致所有点击事件传递到下方的三角形日历选择器指示器。我不完全确定日历选择器指示器的位置在不同浏览器中的一致性如何，但它应该非常相似。请参阅下面的示例。
.sd-container {
position: relative;
float: left;
}
.sd {
padding: 5px 10px;
height: 30px;
width: 150px;
}
.open-button {
position: absolute;
top: 11px;
right: 3px;
width: 25px;
height: 25px;
background: #fff;
pointer-events: none;
}
.open-button button {
border: none;
background: transparent;
}<form>
<div class="sd-container">
<input class="sd" type="date" name="selected_date" />
<span class="open-button">
<button type="button"></button>
</span>
</div>
</form>Also it is possible to change some of the appearance of the date input field (but not the calendar date picker) as it styles similar to a text input field. In addition their are a number of WebKit CSS properties that are explained here Are there any style options for the HTML5 Date picker?
还可以更改日期输入字段（但不是日历日期选择器）的某些外观，因为它的样式类似于文本输入字段。此外，还有许多 WebKit CSS 属性在此处进行了说明。 HTML5 日期选择器是否有任何样式选项？
回答by djibe
Love Material Design ? Use this code (only for Chrome and Safari).
喜欢材料设计？使用此代码（仅适用于 Chrome 和 Safari）。
Want to restrict picker to Dates (not months or datetime-local) ? Add input[type="date"] before selectors.
想要将选择器限制为日期（不是月份或日期时间本地）？在选择器之前添加 input[type="date"]。
Just copy-paste this CSS and add it to your own CSS code.
只需复制粘贴此 CSS 并将其添加到您自己的 CSS 代码中即可。
::-webkit-search-cancel-button,
::-webkit-clear-button {
-webkit-appearance: none;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%23000" fill-opacity=".54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3C/svg%3E');
color: rgba(0, 0, 0, 0.54);
cursor: pointer;
height: 1.5rem;
margin-right: 0;
width: 1.5rem;
}
::-webkit-calendar-picker-indicator {
color: rgba(0, 0, 0, 0);
opacity: 1;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%23000" fill-opacity=".54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3C/svg%3E');
width: 14px;
height: 18px;
cursor: pointer;
border-radius: 50%;
margin-left: .5rem;
}
::-webkit-calendar-picker-indicator:hover {
-webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<div class="container">
<div class="row my-4">
<div class="col">
<div class="form-group">
<label for="exampleInput2bis">Date</label>
<input class="form-control" id="exampleInput2bis" placeholder="Date" type="date">
</div>
</div>
</div>
</div>