2021/08/13 時点の英語版に同期

1 files changed, 67 insertions, 0 deletions

diff --git a/files/ja/web/css/_colon_user-invalid/index.md b/files/ja/web/css/_colon_user-invalid/index.md
new file mode 100644
index 0000000000..25592d7d4f
--- /dev/null
+++ b/files/ja/web/css/_colon_user-invalid/index.md
@@ -0,0 +1,67 @@
+---
+title: ':user-invalid (:-moz-ui-invalid)'
+slug: Web/CSS/:user-invalid
+tags:
+  - CSS
+  - CSS Selectors
+  - 擬似クラス
+  - リファレンス
+  - セレクター
+browser-compat: css.selectors.user-invalid
+translation_of: Web/CSS/:user-invalid
+---
+{{CSSRef}}
+
+**`:user-invalid`** は CSS の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーの操作の後、[制約検証](/ja/docs/Learn/Forms#constraint_validation)に基づき有効と判断されなかった検証済みのフォーム要素を表します。
+
+`:user-invalid` 擬似クラスは、ユーザーがフォームの送信を試みた後、そのフォーム要素を再び操作するまで、 {{CSSxRef(":invalid")}}, {{CSSxRef(":out-of-range")}}, {{CSSxRef(":required")}} で空欄の要素に一致します。
+
+> **Note:** この擬似クラスは標準外の `:-moz-ui-invalid` 擬似クラスと同じように動作します。
+
+## 構文
+
+{{CSSSyntax}}
+
+## 例
+
+### :user-invalid で色と記号を設定する
+
+以下の例では、次の例では、赤枠と❌はユーザーがフィールドを操作した場合にのみ表示されます。
+メールアドレス以外を入力してみて、その動作を確認してみてください。
+
+```html
+<form>
+  <label for="email">Email *: </label>
+  <input id="email" name="email" type="email" required>
+  <span></span>
+</form>
+```
+
+```css
+input:user-invalid {
+  border: 2px solid red;
+}
+
+input:user-invalid + span::before {
+  content: '✖';
+  color: red;
+}
+```
+
+{{EmbedLiveSample("Setting_a_color_and_symbol_on_user-invalid", 140, 100)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{CSSxRef(":valid")}}
+- {{CSSxRef(":invalid")}}
+- {{CSSxRef(":required")}}
+- {{CSSxRef(":optional")}}
+- {{CSSxRef(":user-valid")}}