CSS - outline-offset

• トップ
• CSSリファレンス
• outline-offset

概要

説明

フォーカスがあてられた時などに表示するアウトラインと、ボーダー間の距離を指定します。

使用例

.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">

関連項目

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/outline-offset
• https://drafts.csswg.org/css-ui/#outline-offset