物化css在使用required for dropdown选择框时导致浏览器错误

我有一个select元素,它需要一个用于空字段验证的必需属性。具体化生成一个输入框,然后隐藏原来的选择框。这会导致chrome浏览器出错

An invalid form control with name='foo' is not focusable.

我使用的是thymeleaf模板(我认为这是无关紧要的,但我只是包含了这个信息以防万一)。我的html如下所示:

<select th:field="*{foo}" required="" aria-required="true">
<option th:value="null"></option>
<option th:each="f : ${fooList}"
        th:value="${f}"
        th:text="${f}"></option>
</select>
<label for="foo">foo</label>