css - 如何使用CSS调整HTML5验证指标

Question

在我的 HTML5 输入字段上，我使用 required 和 CSS 来显示星号和其他指示符来告诉用户他们的输入是有效的。对于我的输入字段之一，type="number" 放置箭头以将值上下调整 1。不幸的是，这些箭头覆盖了指标。我一直在尝试使用 CSS 来调整这些指示器的位置，但我认为这是一项简单的任务，但事实并非如此。我可以针对一般情况轻松调整所有位置，但无法针对某个目标情况调整所有位置。

HTML

<li>
   <label for="quantity">Quantity:</label>
   <input class="quantity" type="number" min="0" name="quantity" placeholder="quantity" required />
<li>

CSS

.contact_form input:required, .contact_form textarea:required {
    background: #fff url(../image/product/none/red_asterisk.png) no-repeat 98% center;
}

.contact_form .quantity input:required {
    background: #fff url(../image/product/none/red_asterisk.png) no-repeat 92% center;
}

Answer 1

您可以通过这种方式定位输入类型编号:

.contact_form input[type="number"]:required

然后调整星号位置。

.contact_form input[type="number"]:required {
    background: #fff url(../image/product/none/red_asterisk.png) no-repeat 96% center;
}