より良いCSSのボックスの影とアウトライン

私は、デフォルトのブラウザの輪郭スタイリングは、最も美しいデザインの実装ではないことに同意することができます.また、私たちはそれがきれいでないかもしれないということに同意することができると思います、しかし、それはよく機能します.
人々が完全にアウトラインを取り除いて、どんな他の視覚的な徴候でそれを取り替えるかについて見ないことは、一般的でありえます.これは悪い練習であり、キーボードユーザーのユーザーエクスペリエンスを傷つけることができます.
我々のサイトをアクセス可能にしている間、我々のデザイナーをなだめるために、デフォルトアウトラインスタイルを取り除いて、以下に示される箱影実現でそれを取り替えてください.

input:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, .5);
}

そこで、入力が集中したときにアウトラインを0に設定し、その機能を置き換えるためにボックスシャドウ宣言を追加することができます.追加ボーナスとして、ボックスの影を使用しても境界半径の宣言に従います.したがって、我々の入力が4 pxの境界半径を持つならば、我々の偽のアウトラインは角で隙間を持たないでしょう.
チェックアウトCodePen アクションでそれを見る例.