html - 空の必須フィールドを描画する CSS

Question

CSS を使用してフォームの必須フィールドを描画したいので、ユーザーは入力する必要があることがわかります。また、フィールドに値が設定されたら絵を消したいです。

これは私が試したものの例です：

CSS

input[type="text"]{
    display:block;
}
input.required[value=""] {
    background-color:yellow;
}

HTML

Name:<input class="required" type="text" name="Name" value="" size="20">
Phone:<input type="text" name="Phone" value="" size="20">

必要なフィールドは問題なくペイントされています。問題は、フィールドに値が入力されると色が消えないことです。

純粋な CSS で動作させる方法はありますか?

score 2 · Accepted Answer

新しいブラウザーの場合::invalid疑似セレクターとrequired属性を使用します。古いブラウザでは JavaScript が必要です。

フレームワークが HTML5 属性の追加を妨げている場合は、フレームワークに質問します (またはバージョンの更新を検討します)。

$(function() {
    $(".required.").attr("required", "true");
});

理想的とは言えませんが、システムを汚染しないほど単純です。

1 に答える 1