Question

使用thymeleaf starter for Spring Boot，我有一个简单的登录表单定义：

<form action="#" th:action="@{/login}" method="post">
    <input class="form-control" type="text" id="username" name="username" th:placeholder="#{login.form.username}"/>
    <input class="form-control" type="password" id="password" name="password" th:placeholder="#{login.form.password}"/>

    <button class="btn btn-default btn-block" type="submit" name="submit" th:text="#{login.form.submit}">Login</button>
</form>

当我在Chrome中检索页面时，我看到以下呈现的HTML：

<form action="/login" method="post">
    <input class="form-control" type="text" id="username" name="username" placeholder="Username">
    <input class="form-control" type="password" id="password" name="password" placeholder="Password">

    <button class="btn btn-default btn-block" type="submit" name="submit">Login</button>
    <input type="hidden" name="_csrf" value="1bc1dbff-d675-409b-8905-05e43a907c79">
</form>

但是，在Firefox中，我看到一个样式属性被添加到输入中，这导致了问题：

<form action="/login" method="post">
    <input class="form-control" id="username" name="username" placeholder="Username" style="background-image: url("undefined"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: pointer;" type="text">
    <input class="form-control" id="password" name="password" placeholder="Password" style="background-image: url("undefined"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;" type="password">

    <button class="btn btn-default btn-block" type="submit" name="submit">Login</button>
    <input name="_csrf" value="525584fa-939b-4f48-aabf-d4dcde234599" type="hidden">
</form>

为什么会这样？我可以禁用添加的样式属性吗？到目前为止，我唯一的解决方法是设置：

input[type=text], input[type=password] {
/* Firefox fix */
background-image: none !important;
}

但这并不是很优雅。

Firefox中输入的未定义背景图像

0 个答案: