Input date placeholder - html

Question

I have managed to put the placeholder plus the dd/mm/yyyy together. When I click in order to key in or select the date, the box resets to its default state. Styles like padding, width, and color disappears but when I click outside the box, it returns to default with the styles in place. I would like it to remain the same when selecting the date. Kindly help.
input {
border: 1px solid #ecf0f1;
color: #00A79D;
}
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.3em;
padding: 11px;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.5em;
}
input[type="date"]:focus:before {
content: '' !important;
color: #00a79d;
}
<div class="col-sm gutters-19">
<div class="form-group">
<div class="form-select-custom">
<input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
</div>
</div>
</div>

Answer 1

This style content: '' !important; is causing the problem:
input[type="date"]:focus:before {
content: '' !important; /* THIS IS THE PROBLEM */
color: #00a79d; /* This is ok */
}
You are removing all the content (i.e. the placeholder word "Departure") and that is what is adding the width and padding.
FYI you are also duplicating the input[type="date"]:before rule, I've combined them into one.
Snippet with that line removed, and you can see it is working:
input {
border: 1px solid #ecf0f1;
color: #00A79D;
}
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.5em;
padding: 11px;
}
input[type="date"]:focus:before {
color: #00a79d;
}
<div class="col-sm gutters-19">
<div class="form-group">
<div class="form-select-custom">
<input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
</div>
</div>
</div>

Answer 2

You shouldn't use ::before on input date elements, since it's heavily browser-specific
Your styles don't disappear : you make your ::before vanish, and it's the thing making the space inside your input. So your input naturally shrinks. Just play with your input[type="date"]:focus::before content, you'll see what i mean.
Not tested, but you could perhaps avoid your javascript toggleClass by using the :empty state. https://developer.mozilla.org/fr/docs/Web/CSS/:empty

Answer 3

simply set width and height to input tag
input{
height: 39px;
width: 237px;
}