◆ Chromeのoutlineがいい感じだったので同じCSSを設定しようとしたらできなかった
◆ 独自auto というstyle があるみたい 

Chromeで例のブログエディタを使っていると textareaにカーソル合わせる(フォーカスする)と いい感じに枠が太くなってくれます

outline-01
 
これってCSSのoutlineの機能だよね
別ブラウザってどうなってるの?
と疑問に思ってFirefoxを起動してみました
すると フォーカスしていても全く枠に変化はありません

Firefoxってoutlineプロパティ使えなかったっけ?

Chromeのuser agent sytle を見てみると

outline-webkit-focus-ring-color auto 5px;

となっていました
-webkit-focus-ring-color はさすがにFirefox で使えそうにないので色だけを変えて 直接 outline に設定してみます

反応無し

あれー outline普通に使えた記憶があるんですけど?

もう少し outline プロパティをいじっていると auto という style だと何もおきないだけで solid などの指定では反応します

auto がダメだとわかったので autoが使える Chromeで auto が何になってるのか調べてみます
補完内容から順番に試してみてわかったことが

auto と一緒のがない!

Chromeの専用のやつみたいで outlineの太さのプロパティを完全に無視して いい感じに線を引いてくれるようです
デフォルト 5px となってますが 変えても無意味でした
outline-02
真ん中が濃くて 外側は薄いです
しかも 背景色が混ざってるので 透過度処理までしてるようです

Firefoxにはこんな綺麗なoutlineはなさそうです
太さプロパティ無視だし こんな スタイルは公式で来なそうだからFirefoxは諦めるしかないのかな

outline なくして border や box-shadow などを駆使して近いものがつくれるかもしれないですが そこまでするほどなのかと聞かれたら Chromeで動いてるならそれでいいです というほどですし