HTML5 フォームを作成しており、Chrome を除くすべての最新ブラウザーで次の css が動作しています。
input:focus:required:invalid:after, textarea:focus:required:invalid:after { content: "!"; font-size: 20px; margin: -18px 0 4px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); display: block; float: right; color: #c40000; }
input:focus:required:valid:after, textarea:focus:required:valid:after { content: "\2713\0020"; font-size: 20px; margin: -18px -4px 4px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); display: block; float: right; color: #009c00; }
これは、入力テキストが無効な場合は感嘆符 (!) を表示し、他のすべてのブラウザーと同様にチェックマーク (✓) を表示する必要がありますが、何らかの理由で Chrome が気に入らないだけです。
ここで提案されているように、代わりに :before 疑似を使用してみましたが、どちらも機能しません。css は Chrome の Developer Tools Styles に表示されますが、何も表示されません。「実際の文字の代わりに小さな画像を使用しないでください」という提案は受け入れられないため、ご遠慮ください。他のすべての提案は大歓迎です! :)