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

user_13166089 0
Viewed 1676

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 class="input-field date" type="date" placeholder="Date and Time">

enter image description here

css html
2 Answers

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 class="input-field date" type="date" placeholder="Date and Time">

user_87176420 

.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">

user_200762030
Related