1

私のHTML5入力フィールドではrequired、CSSを使用してアスタリスクやその他のインジケーターを表示し、ユーザーに入力が有効であることを伝えています。私の入力フィールドの1type="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;
}
4

1 に答える 1

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;
}
于 2013-02-12T18:24:51.147 に答える