Bootstrap 4, in a input date smaller text is not visible - css

Question

I have a very high form with lot of input fields, so I had to reduce the height of every input.
As also bootstrap form-control-sm was not tight enough for me, I created a new class form-control-xs:
.form-control-xs {
height: 20px!important;
padding: .025rem .25rem !important;
font-size: .75rem !important;
line-height: 0;
border-radius: .2rem;
}
Everything is working well, except the "date" input fields, as you see in the image the text is not visible.
It seems like there is an inner margin or padding, but i don't understand how to change it.
Do you know if is it possible to do it?
I add a snippet:
.form-control-xs {
height: 20px!important;
padding: .025rem .25rem !important;
font-size: .75rem !important;
line-height: 0;
border-radius: .2rem;
}
<fieldset>
<div class="form-group row mb-0">
<label for="from" class="col-sm-4 col-form-label col-form-label-sm">LABEL</label>
<div class="col-sm-7 ">
<input type="date" class="form-control form-control-xs" stl NAME="from" autocomplete="off" value="">
</div>
</div>
</fieldset>

Answer 1

.form-control-xs {
height: 20px!important;
font-size: .75rem !important;
border-radius: .2rem;
}
<fieldset>
<div class="form-group row mb-0">
<label for="from" class="col-sm-4 col-form-label col-form-label-sm">LABEL</label>
<div class="col-sm-7 ">
<input type="date" class="form-control form-control-xs" stl NAME="from" autocomplete="off" value="">
</div>
</div>
</fieldset>