CSS3

：

疑似クラス

：

:user-valid

　編集：2022.07.09 by T.A.

[Edge]⛌？。→●、mdn

利用者による有効な値なら。

E:user-valid

`E`	該当させる要素。

:user-valid 疑似クラスは、正しい値が入力されていて、かつ利用者が有意にやりとりした後に限り対象になる要素を表現する。

:user-valid 疑似クラスは、利用者がフォームを提出しようと試みてから再び当のフォーム要素と有意にやりとりするまでの間、:valid な要素に合致させるものとする。

ユーザーエージェントは、利用者向けにエラーを強調表示する方が適切になる要素があれば、それらに合致させてもよい。例えばユーザーエージェントは、利用者が何らかのテキストを打ち込んでから別の要素にフォーカスを移動したとき、:invalid な要素を :user-invalid に合致させ、利用者が入力を成功裡に正した後に限り、合致させなくしてもよい。

例えば、次の文書片における入力は、ページが読み込まれた時点で（初期時の値（value=11）が最大値（max=10）を超えているので）、:invalid に合致することになるが、利用者が［要素と有意にやりとりするか、要素が属するフォームを提出しようと試みるまで］は、:user-invalid に合致しない。

<form>
  <label>
    Volume:
    <input name='vol' type=number min=0 max=10 value=11>
  </label>
  ...
</form>

以下のCSSが組み込んであります：

<INPUT class=Test type=number max=10><BR>
<INPUT class=Test type=email><BR>

テスト

別画面に表示させて。

HTML：

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="default-style" content="text/css">
<TITLE>CSS3：テスト</TITLE>
<STYLE>
:user-invalid	{
	outline:2px solid #f00;
}
:user-valid	{
	outline:2px solid #00f;
}
</STYLE>
</HEAD>
<BODY>
<INPUT max=10 type=number><BR>
<PROGRESS value="0.5"></PROGRESS><BR>
<INPUT type=radio required name=Test1>
<INPUT type=radio name=Test1><BR>
<SELECT >
 <OPTION>OPTION要素１
 <OPTION selected>OPTION要素２
 <OPTION>OPTION要素３
</SELECT><BR>
<SELECT required>
 <OPTION>OPTION要素１
 <OPTION selected>OPTION要素２
 <OPTION>OPTION要素３
</SELECT><BR>
<AUDIO id=IdAUDIO src="../Sample/PCOto.mp3" controls></AUDIO><BR>
<SCRIPT>
IdAUDIO.muted=true;
</SCRIPT>
<A href="#Aテスト">A要素</A><BR>
<A href="#Aテスト2">A要素2</A><BR>
<DIV lang="de">DIV要素</DIV>
<FORM>
<INPUT type=radio name=Test>
<INPUT type=radio name=Test>
</FORM>
<INPUT value="ここに入力"><BR>
<INPUT value="ここに入力" readonly><BR>
<DIV>DIV要素ですんちゃ、<SPAN>SPAN要素</SPAN>だっちゃsperl<BR>これからもよろしくお願いします。<BR>きょうは晴れです。</DIV>
<SPAN>SPAN要素</SPAN>This as pen.
<BUTTON>BUTTON要素</BUTTON>
<BUTTON disabled>BUTTON要素</BUTTON><BR>
<A id=Aテスト>A要素ジャンプ先</A><BR>
<A id=Aテスト2>A要素<SPAN>SPAN要素ジャンプ先</SPAN></A><BR>
</BODY>
</HTML>

ここに表示

¶[Edge]✖？

ここに表示

スクリプト：

スクリプト：

表示内容：