Bootstrap 4、在输入日期中较小的文字不可见

Question

我有一个非常高的表单，有很多输入字段，所以我不得不降低每个输入的高度。由于 bootstrap form-control-sm 对我来说不够紧，我创建了一个新的 class form-control-xs:

.form-control-xs {
    height: 20px!important;
    padding: .025rem .25rem !important;
    font-size: .75rem !important;
    line-height: 0;
    border-radius: .2rem;
}

一切正常，除了“日期”输入字段，正如您在图片中看到的，文本不可见。似乎有内部边距或填充，但我不知道如何更改它。你知道是否可以做到吗？

我添加一个片段：

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

Bootstrap 4、在输入日期中较小的文字不可见

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

css

bootstrap-4