how do I change the position of date picker/ calendar icon in html and CSS without using bootstrap-CodePudding

I using and the calendar icon /date-picker is by default set on the right side(end of the input field). I want to move the calendar icon/date-picker at the beginning of the input field. I tried to change it but I can't get the proper property to change it. Please anyone can help to change it...! i'm adding the picture which looks like now.here is the code which I used...

 <input  type="date" placeholder="Date and Time">

CodePudding user response：

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
}

<input  type="date" placeholder="Date and Time">