| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {outline-offset: 値 } |
| 値 の形式 | inherit | 長さ |
| 初 期 値 | 0 |
| 対応ブラウザー | C2+ / e?+ / N?+ / Fx3.6+ / Op?+ / Ch8+ / Sa5+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
outline-offsetプロパティ は，輪郭のオフセット値を指定します。
outlineプロパティ で指定する輪郭は，border プロパティ で指定する境界とは，次のような点で異なります。
輪郭が表示される場所に別の要素の内容や境界線が表示されている場合は， 輪郭で上書きされますのでレイアウトや輪郭のスタイルに注意が必要です。
数値によるは，次のような単位を付けて可能です。
| 単位 | 説 明 |
|---|---|
| px | px とは画面の１画素（ピクセル） のサイズを１とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
| em | em とは現在使用中の標準フォントの高さを１とする単位です。 |
| ex | ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- input.sample:focus { outline-width: 3px; outline-style: solid; outline-color: #ddff88; outline-offset: 3px; } --> </style> <script type="text/javascript"> window.onload = function() { document.getElementById('ans1').focus(); } </script> |
| HTML <body> ～ </body> |
<div>問１：<input type="text" class="sample" id="ans1"></div><br> <div>問２：<input type="text" class="sample" id="ans2"></div><br> <div>問３：<input type="text" class="sample" id="ans3"></div> |
| ブラウザー 表示例 （未対応のブラウザーでは正しく表示できません） |
|---|
問１： 問２： 問３： |
上の例では，フォーカスのある input要素 に対して輪郭が表示されます。
輪郭の表示される場所は， input要素 の境界外の親要素（div要素）や，さらに，その隣接要素などです。 （輪郭をもっと太くするとさらによくわかります。）