| 属性名 | outline-offset |
|---|---|
| 値 | <length> |
| 初期値 | 0 |
| 適用可能要素 | すべての要素 |
| 継承 | なし |
| サポート | https://caniuse.com/?search=outline-offset |
フォーカスがあてられた時などに表示するアウトラインと、ボーダー間の距離を指定します。
| 値 | 説明 |
|---|---|
| <length> | アウトラインとボーダー間の距離を指定します。 |
.test {
display: block;
margin-bottom: 1rem;
border: 1px solid #999;
}
.test:focus {
outline: 3px solid #c99;
outline-offset: .3em;
}
<input type="text" class="test" id="item1"> <input type="text" class="test" id="item2"> <input type="text" class="test" id="item3">