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

Question

在我使用的 HTML5 输入字段required和 CSS 中显示 asterix 和其他指示符，以告诉用户他们的输入是有效的。对于我的一个输入字段，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;
}