ArtSaltのサイドストーリー

webサイトで入力フォームに記入中、記入する項目が多い場合、現在どの入力部分にフォーカスしているかがわからなくなることがあります。

次はメールアドレスの記入だと思って入力したら、そこは電話番号記入欄だったなんてこともよくありますが、こういう場面では非常にイライラしますね。

そんなミスを減らしてくれるかもしれないFirefoxアドオンが「Highlight Focus」です。

「Highlight Focus」は、何かの登録フォームやブログの記事作成画面など、テキストエリアが複数あるWebページ上で、現在選択しているフォームエリアをハイライトカラーで目立たせてくれるアドオンです。

【Mozilla Re-Mix: 選択しているフォームの記入部をハイライトして目立たせることができるFirefoxアドオン「Highlight Focus」】

• Highlight Focus :: Firefox Add-ons

発想が素晴らしい。でも、これ読んで0.001秒ぐらいでひらめいた。CSSで同じことできるじゃん。

アイディアだけパクらせてもらう。userContent.cssに書くコード。

input:not([type]):focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
input[type="image"]:focus,
input[type="file"]:focus,
input[type="hidden"]:focus,
textarea:focus,
select:focus
{
outline: 2px solid blueviolet !important;
background: pink !important;
}

このスタイルをグローバルに適用させればOK。outlineプロパティを加えるのが私のオリジナル♪

で、これと同じことをOperaでやるには、… うーん、profileフォルダのstylesフォルダのuserフォルダの中にある、グローバルに適用される「なんとか.css」に上記コードを書くんだけど、 … うーん、面倒なので、やめたｗ

input:focus, 
textarea:focus, 
select:focus 
{ 
outline: 2px solid blueviolet !important; 
background-color: pink !important; 
} 

このように書いてみたらoutlineプロパティは効くけど、backgroundとかbackground-colorプロパティでの色の指定は効きませんね（Opera9.27）。なんでだろ。

… とコメント欄に書いたけど、こういう事情でした v(^^)

でも、outlineプロパティだけはチェックを外した状態でもOKなんだよね。不思議。