ArtSaltのサイドストーリー

音楽、フリーウェア、WEBサービス、食べものなどに関する日記。トラックバック、コメント歓迎。

選択しているフォームの記入部をハイライトして目立たせることができるユーザCSS

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

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

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

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

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

発想が素晴らしい。でも、これ読んで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プロパティを加えるのが私のオリジナル♪

Firefoxスクリーンショット

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

2008年05月26日追記

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

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

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

Operaのスクリーンショット

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

Google
WWW ArtSaltのサイドストーリー
はじめましてこんばんは。
form > input:focus,
form > textarea:focus,
form > select:focus
{ 略 }

とかじゃダメでしょうか?
2008/05/24(土) 00:49:21 | URL | itochan #GCA3nAmE[edit]
はじめまして、itochanさん。Opera関係のサイトでよく見かける人ですよね。

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

このように書いてみたらoutlineプロパティは効くけど、backgroundとかbackground-colorプロパティでの色の指定は効きませんね(Opera9.27)。なんでだろ。
2008/05/24(土) 14:07:47 | URL | ArtSalt(管理人) #8e0HLmiU[edit]
なんとか.cssに上記コードを追加、ではなくて、新しくなんとか.cssファイルをそのフォルダに追加してOperaを再起動すると、メニューのView->Styleからさっき追加した「なんとか」が見えるはずなのでそれにチェックを入れるとグローバルに適用されます。複数にチェックを入れることもでき、その場合は希望通り複数のcssを適用した状態になります。OperaでHaHを使ったときに覚えました。

そういえばFirefoxでは一つのファイルに全部書くんでしたっけ。

これやばい便利ですね。早速使ってますよ。
2008/05/24(土) 18:27:19 | URL | edvakf #Y.EWVbK6[edit]
いえいえ、itochanさんへのレスでも書いたように、outlineプロパティはOKなんだけど、backgroundプロパティがダメなんですよ。CSSの解釈がGecko系とは違うのかな。
2008/05/24(土) 21:33:17 | URL | ArtSalt(管理人) #oWxiq2YE[edit]
9.50betaですが、本文にある通りのコードでbackgroundも色つきますよ。
2008/05/25(日) 03:23:30 | URL | edvakf #Y.EWVbK6[edit]
そうですよね、効くはずですよねぇ。またどこか根本的なミスをやってる可能性があるので、時間をかけて調べたいと思います。
2008/05/25(日) 11:37:10 | URL | ArtSalt(管理人) #XNOZWOn2[edit]
自己レス。
2008年05月26日付けの追記を書いた。
2008/05/26(月) 21:34:54 | URL | ArtSalt(管理人) #Yoas50K.[edit]
Web site (optional)
Comment - Need to type CAPTCHA, an image of distorted Japanese Hiragana or Katakana afterward.
Password - Not allowed to modify your comment later if password not entered.
On secret mode?
 

http://art2006salt.blog60.fc2.com/tb.php/752-936158df

このブログについて

最近のエントリ

カテゴリー
あわせて読みたいブログ

あわせて読みたい

最近のコメント
Internet Explorer
よりも便利です

Opera 9 - Always secure with Opera Firefoxをダウンロード!!

相互リンク