如何在不使用引导程序的情况下更改 html 和 CSS 中日期选择器/日历图标的位置答案

【问题标题】：how do I change the position of date picker/ calendar icon in html and CSS without using bootstrap如何在不使用引导程序的情况下更改 html 和 CSS 中日期选择器/日历图标的位置
【发布时间】：2022-09-24 17:48:56
【问题描述】：

我使用日历图标 /date-picker 默认设置在右侧（输入字段的末尾）。我想在输入字段的开头移动日历图标/日期选择器。我试图改变它，但我无法获得适当的属性来改变它。请任何人都可以帮助改变它...！ i\'m adding the picture which looks like now.这是我使用的代码...

 <input class=\"input-field date\" type=\"date\" placeholder=\"Date and Time\">

标签： html css

【解决方案1】：

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(/*yourURLHere*/) no-repeat;
    width: 25px;
    height: 25px;
    border-width: thin
}

&lt;input class="input-field date" type="date" placeholder="Date and Time"&gt;

【讨论】：

我想更改输入字段开头的日期选择器图标。在您添加的代码中，日期选择器的位置是输入字段的结尾。

【解决方案2】：

.input-field{
    height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
    display: block;
    width: 40%;
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid black;

}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background-repeat:  no-repeat;
    width: 25px;
    height: 25px;
    border-width: thin
}
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 5%;
}
input::-webkit-datetime-edit-fields-wrapper {
    position: relative;
    left: 10%;
}
input::-webkit-datetime-edit {
    position: relative;
    left: 10%;
}

 &lt;input class="input-field date" type="date" placeholder="Date and Time"&gt;

【讨论】：