日曜、午後、6時半。のロゴ

inputなどのリンクを選択した時に表示される青色の枠線を消す方法【Googleクローム】

Googleクロームでinputなどのリンクを選択した時に表示される青色の枠線を消す方法

つい先日、コンバージョン改善の取り組みの一環として、フォームボタンの修正を行いました。

その際、困ったこと。

クロームで確認すると、青枠が表示される!!

 

原因は、クロームのスタイルシートに「outline」が設定されている影響によるもの。

初期設定がそうなっているのだから、当然これまでも青枠は表示されていました。

でも、全然気にならなかったんですよね…

なぜなら「ボタン」と「青枠」のサイズがイコールだったから。

ボタンと青枠のサイズが同じ

 

ただ、今回は申し込みボタンにキャンペーン情報を追加しました。

キャペーン情報を追加したボタン

↓ クリックすると…

ボタンと青枠のサイズが違う

めちゃくちゃ青枠が目立つッ!!!

↓ボタンのソースコードはこんな感じ。

先輩からも総ツッコミ。

先輩1
ボタンと...

先輩2
青枠のサイズが…

先輩3
合ってないよ…

ぼく
スイヤセン...

てな訳で修正。

修正方法はデフォで設定されている「outline」を消すだけだからとても簡単。

スタイルシートに以下のコードを記述するだけで完了です。

これで終わりかと思いきや…

このブログのグローバルナビゲーションにも同様の青枠が。

グローバルナビでも青枠が表示される

inputのみに適用される設定じゃなかったのね…

青枠が表示されている箇所をしらみつぶしに探していくのも手間なので、全要素に対して「outline:none;」を設定しました。

これにて完了。

 青色の枠線を消すことに成功

見た目がすっきりしました。

ぼく
そのままにしておいても全く問題はありませんが、見た目的に明らかに邪魔な様であれば、消した方がいいかと。

そんな感じで。終わりッ!!

 

コメントを残す