User action / Input Selector

作成:
更新:

ここで扱うセレクタについて

時点におけるSelector 4 Editor's Draftの9章と11章で定義されている擬似クラスをまとめた(その一部はかつてCSS3-UI仕様で定義されていた)。

目次

実装状況

value IE Edge Firefox Blink 初出CSSレベル
ユーザーアクション疑似クラス
:hover 2
:active 2
:focus 2
:focus-within(※1) ----4
:drop(※1) ----4
:drop()(※1) ----4
インプット疑似クラス
:enabled 3
:disabled 3
:read-only ×4(※8)
:read-write ×4(※8)
:placeholder-shown △(※2)△(※3)△(※4)4
:default ×××4(※8)
:checked 4(※8)
:indeterminate △(※5)△(※5)△(※5)△(※5)4
:valid(※6) 4(※8)
:invalid(※6) 4(※8)
:in-range ×(※7)4(※8)
:out-of-range ×(※7)4(※8)
:required 4(※8)
:optional 4(※8)
:user-invalid(※1) ----4

ユーザーアクション疑似クラス

selector 4の9章にまとめて定義される疑似クラス群。

:hover:active:focus

テスト:

CSS2.1で導入された動的擬似クラス。マウスで操作することを前提にすると、入力欄にマウスポインタが重なったとき、入力欄でマウスボタンを押しているとき、入力欄に入力フォーカスを持たせたときにそれぞれ色が変わる。タブレット端末やスマートフォンで、所望の動作が得られるとは限らないことに注意したい。

form#form1 input:hover{background-color: lightgreen;}
form#form1 input:focus{background-color: lightblue;}
form#form1 input:active{background-color: peru;}
...
<form action="#" method="get" id="form1">
<fieldset>
<p>テスト:<input type="text" /></p>
</fieldset>
</form>

:drop

Selector 4仕様においてdropzone属性が指定されたHTML要素に対してセレクタがマッチすることが示唆されているものの、執筆時点でこのセレクタに対応する実装は存在しない(?)模様。一応下記にそれっぽいテストを作成したが、もしかしたら記述が怪しいかもしれない。

このテキストはドラッグできます。

ここにテキストをドロップすると、何かが起きるかもしれません。

インプット疑似クラス

selector 4の11章にまとめて定義される疑似クラス群。

:enabled:disabled

input1:

input2:

disabledが設定されているかどうか。挙動については、HTML4(ja) disabledHTML5(ja) disabledを参照。

form#form2 input:enabled {background-color: lightgreen;}
form#form2 input:disabled {background-color: lightgray;}
...
<form action="#" method="post" id="form2">
<fieldset style="width:450px;">
<p>input1:<input type="text" name="name" /></p>
<p>
input2:<input type="text" name="address" disabled="disabled" />
<button type="button" onclick="document.getElementById('form2').address.disabled=false;">input2を変更する</button>
<button type="button" onclick="document.getElementById('form2').address.disabled=true;">input2を固定する</button>
</p>
</fieldset>
</form>

:read-only:read-write

:read-only:read-write

名前:

住所:

HTMLでreadonly属性が設定されているかどうかの判定。前述のdisabledとHTMLとしてどう違うのかは、小粋空間: input 要素の disabled 属性と readonly 属性の違いを参照。

form#form3 input:read-only	{background-color: silver;}
form#form3 input:read-write	{background-color: lightgreen;}
form#form3 input:-moz-read-only	{background-color: silver;}
form#form3 input:-moz-read-write {background-color: lightgreen;}
...
<form action="#" method="post" id="form3">
<fieldset style="width:400px;">
<p><code>:read-only</code><code>:read-write</code></p>
<p>名前:<input type="text" name="name" /></p>

<p>住所:<input type="text" id="read" value="東京都" readonly="readonly" />

<button type="button" onclick="document.getElementById('read').readOnly=false;">住所を変更</button>
<button type="button" onclick="document.getElementById('read').readOnly=true;">住所を固定</button>
</p>
</fieldset>

:placeholder-shown

placeholder属性値に対する疑似クラス。ここではcolor: green;と設定したが、Firefoxで見ると色が微妙に薄く見えるのは気のせいだろうか。

:default

test2:

HTMLでcheckedselectedが指定された要素に対して変化する…はずだけど、Firefox以外の挙動が怪しい(?)。

form#form8 :default {
    outline: dashed 3px gold;
    color: tomato;
}
...
<form action="#" method="get" id="form8">
<fieldset>
<p>
   <select multiple="multiple" size="4" name="component-select">
      <option selected="selected" value="component_1">component_1</option>
      <option selected="selected" value="component_2">component_2</option>
      <option>component_3</option>
      <option>component_4</option>
      <option>component_5</option>
      <option>component_6</option>
   </select>
</p>

<p>
test2:
<label><input type="checkbox" name="test2" value="item01" /></label>
<label><input type="checkbox" name="test2" value="item02" /></label>
<label><input type="checkbox" name="test2" value="item03" checked="checked" /></label>
</p>
</fieldset>
</form>

:checked

test1:

test2:

チェックが「入」になっているものが変化する。

form#form4 input:checked {outline: solid 3px deeppink;}
...
<form action="#" method="get" id="form4">
<fieldset>
<p>
test1:
<label><input type="radio" name="test1" value="item01" />A</label>
<label><input type="radio" name="test1" value="item02" />B</label>
<label><input type="radio" name="test1" value="item03" checked="checked" />C</label>
</p>

<p>
test2:
<label><input type="checkbox" name="test2" value="item01" /></label>
<label><input type="checkbox" name="test2" value="item02" /></label>
<label><input type="checkbox" name="test2" value="item03" checked="checked" /></label>
</p>
</fieldset>
</form>

:indeterminate

Selector 3では、

Note: ラジオボタンやチェックボックスはユーザーによって切り替えられるが、チェックされてもチェックされていないわけでもない不確定状態となることもある。これは、要素の属性や DOM 操作によって引き起こされることがある。

将来のセレクタ仕様がそのような要素に適用される :indeterminate 擬似クラスを導入する可能性もあるだろう。

という文言で予約されていた、:indeterminateがSelector 4で満を持して(?)登場した。

:indeterminateのテスト

test1:

test2:

progress要素のテスト:

? %

Operaにおける実装では、ラジオボタンには効いて、チェックボックスには効かない。これが仕様として正しい挙動かどうかは不明だが、とりあえず動いていることには違いない。

またMDNでは:indeterminate - CSS | MDNとしてtype="checkbox"に対する各種ブラウザでの実装がほのめかされているが、ここでのテストコードでinput要素に対してJavaScriptで不確定状態に設定しないとうまく働いていないように見えるので、もしかしたらテストコードの書き方が悪いのかもしれない。(progress要素には効果があるようだが)。また、Opera以外においてチェックボックスにのみ効果を発揮し、ラジオボタンに効果を発揮しないのは…よくわかっていない。

<form action="#" method="get" id="form9">
<fieldset>
<p><code>:indeterminate</code>のテスト</p>
<p>
test1:
<label><input type="radio" name="test1" value="item01" id="indet1" />A</label>
<label><input type="radio" name="test1" value="item02" />B</label>
<label><input type="radio" name="test1" value="item03" />C</label>
</p>

<p>
test2:
<label><input type="checkbox" name="test2" value="item01" id="indet2" /></label>
<label><input type="checkbox" name="test2" value="item02" /></label>
<label><input type="checkbox" name="test2" value="item03" /></label>
</p>
<button type="button" onclick="document.getElementById('indet1').indeterminate = true;">「A」を不確定状態にする</button>
<button type="button" onclick="document.getElementById('indet2').indeterminate = true;">「イ」を不確定状態にする</button>

</fieldset>

</form>
<p><code>progress</code>要素のテスト:</p>
<progress max="100">? %</progress>

:valid:invalid

URL:

e-mail:

妥当な値かどうかの判定。Operaでざっくり試してみたら、urlは先頭に'http:'、emailは'@'の前後に英数字があることぐらいしか判定してない模様(HTML5の属性値)。RFCなりと照らしあわせての妥当な値かどうか判定するのは、JavaScriptまたはサーバサイドでのスクリプトのお仕事、ということか。

form#form5 input:invalid {background-color: deeppink;}
...
form#form5 input:valid {background-color: lightgreen;}<form action="#" method="post" id="form5">
<fieldset>
<p>URL:<input type="url" name="url" /></p>
<p>e-mail:<input type="email" name="email" /></p>
</fieldset>
</form>

:in-range:out-of-range

月を入力:

数値が範囲内の値かどうかの判定。Operaで試したところ、英字を入力すると範囲内と判定される。0もしくは負の値を入れると範囲外と判定される(HTML5の属性値)。

form#form6 :in-range {background-color: lightgreen;}
form#form6 :out-of-range {background-color: deeppink;}
...
<form action="#" method="post" id="form6">
<fieldset>
<p>月を入力:<input type="number" min="1" max="12" /></p>
</fieldset>
</form>

:required:optional

名前:

アドレス:

HTMLでrequiredが設定されているかどうかの判定。

form#form7 :required {background-color: pink;}
form#form7 :optional {background-color: lemonchiffon;}
...
<form action="#" method="post" id="form7">
<fieldset>
<p>名前:<input type="text" name="name" required="required" /></p>
<p>アドレス:<input type="text" name="add" /></p>
</fieldset>
</form>

:user-error

:-moz-submit-invalid - CSS | MDNがもしかしたら似たような機能なのかもしれない(が、筆者がよくわかっていない)。なお、11.3.4. 利用者対話 疑似クラス :user-errorが仕様となるが、実装が見当たらなかったため、ここでリンクを紹介するのにとどめる。

検証に使用したブラウザ

Internet Explorer
Trident/7.0; rv:11.0 バージョン 11.0.22(リリース版)
Edge
Edge/13.10586(リリース版)
Firefox
Firefox/40.0(リリース版)
Blink (Google Chrome)
ApAppleWebKit/537.36 Chrome/45.0.2454.93(リリース版)

仕様書とリファレンス

CSS 2.2 動的疑似クラス: :hover、:active、:focus
http://momdo.github.io/css2/selector.html#dynamic-pseudo-classes
セレクタ Level 3 2011年9月29日付 W3C 勧告
http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/
Selectors Level 4 日本語訳 (編集者草案、随時更新)
http://www.hcn.zaq.ne.jp/___/WEB/selectors4-ja.html
CSS Basic User Interface Module Level 3 (WD ) 4. User Interface Selectors
http://www.w3.org/TR/2012/WD-css3-ui-20120117/#user-interface-selectors
Pseudo-classes - CSS | MDN
https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes
フォームのインタフェースデザインを考える(1)
http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20374326/
フォームのインタフェースデザイン(2)
http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20374725/
フォームのインタフェースデザイン(3)--チェックボックスとラジオボタンのデザイン
http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20375190/