★CSS3リファレンス
nav-index …… タブキーによるフォーカス移動の順序を指定する
※サポートされているブラウザは現在調査中です。
※サポートされているブラウザは現在調査中です。
広告
nav-indexプロパティは、タブキーによるフォーカス移動の順序を指定する際に使用します。
フォーカス移動の順序は番号（0でない正の数、1が最初）で指定します。 異なる要素に同じ番号を指定した場合には、文書内の記述順となります。
※メモ：nav-indexプロパティについては、動作を確認中です。 上記の説明は大体合っていると思いますが、以下のサンプルはイマイチ自信がありません。
■値
- auto
- 要素のナビゲーション順序は、ユーザーエージェントによって自動的に割り当てられる（初期値）
- 番号
- 番号（0でない正の数）で要素のナビゲーション順序を指定する
- inherit
- 親要素の値を継承する
■初期値・適用対象・値の継承
- 初期値
- auto
- 適用対象
- すべての適用可能な要素
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
input.sample1 {nav-index:1;}input.sample2 {nav-index:2;}
input.sample3 {nav-index:3;}
input.sample4 {nav-index:4;}
input.sample5 {nav-index:5;}
input.sample6 {nav-index:6;}
input.sample7 {nav-index:7;}
input.sample8 {nav-index:8;}
input.sample9 {nav-index:9;}
input.sample0 {nav-index:10;}
HTMLソース
<html><head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<form action="xxx.php" method="post">
<input class="sample7" type="button" value="7">
<input class="sample8" type="button" value="8">
<input class="sample9" type="button" value="9"><br>
<input class="sample4" type="button" value="4">
<input class="sample5" type="button" value="5">
<input class="sample6" type="button" value="6"><br>
<input class="sample1" type="button" value="1">
<input class="sample2" type="button" value="2">
<input class="sample3" type="button" value="3"><br>
<input class="sample0" type="button" value="0">
</form>
</body>
</html>
↓↓↓
ブラウザ上の表示
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ