HTML日期选择器与日期输入重叠

Question

当我使用以下代码时，日期输入字段被本机HTML日期选择器截断并重叠：

<div class="form-check form-check-inline">
    <div class="input-group ml-2">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="date_from">von</label>
                </div>
                <input th:placeholder="#{date.format}" th:field="*{from}" type="date" max="9999-12-31" min="1000-01-01"
                       class="form-control" id="date_from">
            </div>
    <div class="input-group ml-2">
        <div class="input-group-prepend">
            <label class="input-group-text" for="date_to">bis</label>
        </div>
        <input th:placeholder="#{date.format}" th:field="*{to}" type="date" max="9999-12-31" min="1000-01-01"
               class="form-control" id="date_to">
    </div>
</div>

在浏览器中的外观如下：

将鼠标悬停在输入上时，可以清楚地看到，与输入字段重叠的是本机HTML日期选择器：

所以我的问题是：我该如何解决这个问题？

Answer 1

您可以使用以下两个选项之一：

1. 将输入框的宽度指定为一个值，以使整个日期清晰可见。style="width:(insert value here)"

2. 指定较小的字体，这也将使日期清晰可见。 style="font-size:(insert value here)"

Answer 2

我每天都使用Alex Morrison解释的两个步骤来处理这个问题，此外，请不要忘记，您可以在不同的媒体查询中多次执行两个步骤，以提高响应速度。

Answer 3

您不必创建一个自定义类，也不必在每次输入日期时都手动添加宽度，而可以将CSS中的每个日期作为目标并按照input[type=date]{width:(your width here);}的方式进行操作。