html - 如何在不使用 Bootstrap 的情况下更改日期选择器/日历图标在 html 和 CSS 中的位置

Question

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

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

Answer 1

.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%;
}

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