MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

オートコンプリートの反転色
https://forums.mozillazine.jp/viewtopic.php?f=2&t=10777
ページ 11

作成者:  ebi [ 2010年10月17日(日) 23:01 ]
記事の件名:  オートコンプリートの反転色

google などのテキストボックスで
オートコンプリート機能により候補が現れ
反転色のカーソルにより候補を選択できますが、
この反転色の色を変えるにはどのようにすればよいのでしょうか

userChrome.css に書いて変更できるのか
探してみましたがわかりません

やり方をどうかお教えください。

作成者:  tet [ 2010年10月18日(月) 23:31 ]
記事の件名:  Re: オートコンプリートの反転色

userContent.cssにこのような感じのCSSを書いてはいかがでしょうか。

コード:
@-moz-document url(http://www.google.co.jp/) {
.gac_m { color:white !important; background-color:black !important; }
}

作成者:  tet [ 2010年10月18日(月) 23:34 ]
記事の件名:  Re: オートコンプリートの反転色

失礼しました。今の投稿は間違いです。これでは全体の背景色が変更されてしまいます。

作成者:  ebi [ 2010年10月19日(火) 05:09 ]
記事の件名:  Re: オートコンプリートの反転色

回答ありがとうございます。
content.css というもので個別に対応する方法もあるのですねー。
勉強になります。

google いろいろバージョンアップするのはいいのですが
候補選択の反転色カーソルが淡い水色になって、見にくくなってしまいました。

yahoo では濃い紺色なので大変見やすいのですが
ソースコードを見るもどの部分を参考にすればよいのかさっぱりでした。

すみませんが引き続きアドバイスをお願いいたします。

作成者:  aides [ 2010年10月20日(水) 00:18 ]
記事の件名:  Re: オートコンプリートの反転色

googleの場合の検索フォームのオートコンプリートはデフォルトではoffに成ってるので何とも云えませんが・・・
理論上は「input」要素で「hover」で指定するのが基本だと思いますが、googleの場合は「.lst」に指定しても何も変化が無い(汗

少々観点を変える方法としてはコントラストの強い「テーマ」の適応で解決すると云う方法も在るのでは?
フォームに干渉して影響すると思うのですが・・・
当方は「PitchDark」~ https://addons.mozilla.org/ja/firefox/addon/1529/ ~を適応してますが、結構判り易く成ってます。

根本的な解決では有りませんが、方向性の一つとして提示しました。

作成者:  ebi [ 2010年10月20日(水) 18:57 ]
記事の件名:  Re: オートコンプリートの反転色

ありがとうございます。

aides さんが書きました:
根本的な解決では有りませんが、方向性の一つとして提示しました。

www.google.co.jp から入力せずに
firefox の検索からやるのですね.....
確かにこれならスキンを変えて見やすくなりますね。
操作性が変わるのは仕方ないですが

実は年配の人間からの要望でしたので
なるべく今までの形でと思いましたがなかなか難しいですね。

でもこのスキン、見やすくていいですね。

作成者:  A [ 2010年10月20日(水) 19:55 ]
記事の件名:  Re: オートコンプリートの反転色

これで
@-moz-document url-prefix(http://www.google.co.jp/) {
.gac_b:hover td.gac_c { color:white !important; background-color:black !important; }
}

作成者:  aides [ 2010年10月21日(木) 04:23 ]
記事の件名:  Re: オートコンプリートの反転色

いや・・・
検索バーからのでも、サイトのからでも候補はテーマの文字色・背景色と同じに成ってます。
又、カーソルが重なった時の「hover」の挙動もナビゲーションツールバーと同じ扱いに成ってますから・・・

作成者:  ebi [ 2010年10月21日(木) 06:53 ]
記事の件名:  Re: オートコンプリートの反転色

>>aides さん
>検索バーからのでも、サイトのからでも候補はテーマの文字色・背景色と同じに成ってます。

...なぜかうちでは別になっているようです。不思議です
[/url]


>>tet さん
>>A さん

C:\Users\ユーザ名\AppData\Roaming\Mozilla\Firefox\Profiles\xxxx.default\chrome
の下に、userContent.css を作り試してみました。

すごい!!願いが叶いました!
これで iGoogle であきらめていたテーマが使えます。サイト側の問題なのに
コントロールできたのには感服です。きっと喜んで使ってもらえます。

ただ...マウス操作ではOKで、カーソルキーではNGなのが惜しいであります。
一応、カーソルキーでも操作できないか私も探してみたいと思います。

おかげさまで大変たすかりました。みなさま本当にありがとうございました。
簡単ですがお礼申し上げます。

作成者:  偶然的通行人 [ 2010年10月21日(木) 09:10 ]
記事の件名:  Re: オートコンプリートの反転色

すでに解決済みと見ていい段階ですが、ちょっと横から失礼します。
ぼくも、Web 検索でのオートコンプリートは通常オフにしているので、あまり自信はないのですが......。

hover(と文字色の指定)を省略しただけですが、下記ではどうでしょう。カーソルでの選択も効きませんか。
コード:
/* Google 検索のオートコンプリートのドロップダウンリストの選択背景色 */
@-moz-document url-prefix("http://www.google.co.jp/") {
.gac_b td.gac_c {background-color: red !important;}
}

ここではサンプル的に目立たせるためわざと「red」で指定してありますが、実際の使用ではご自身の好みの色を指定してください。16 進コード指定でも RGB 指定でもかまいません。文字色も変えたいなら A さんのコードを参考に組み合わせを工夫してみてください。

また、最初に tet さんからご提案があったように、選択背景色はそのままにドロップダウンリスト全体の背景色と文字色を変更することで、相対的に選択時の視認性を向上させることも可能でしょう。
ポイントは、全背景色に選択背景色が埋没せず、選択・非選択どちらでも可読性を確保できる文字色という三者の配色バランスでしょうか。
例えば、選択背景色は Google の指定をそのまま活かして、
コード:
/* Google 検索のオートコンプリートのドロップダウンリストの全背景色と文字色 */
@-moz-document url-prefix("http://www.google.co.jp/") {
.gac_m {color: navy !important; background-color: gray !important;}
}

とか......。

@-moz-document url-prefix("http://www.google.co.jp/")
は、http://www.google.co.jp/ を先頭に含むすべてのページを対象にすることを指定しています。
したがって、http://www.google.co.jp/search?hl= ~ などの検索結果のページに対しても有効です。
しかし、http://www.google.com/ など先頭の指定 URL に一致しないサイトにはこのスタイルは適用されません。
  | ダブルクォーテーションは、あってもなくても機能するようですが、
  | 本当はどっちが望ましいのかよくわかりません...。

(補足)
Firefox で表示された Google の検索ページのスタイルと、Firefox のインターフェイスの一部を構成する検索バーのスタイルは別物だと考えてください。(スタイルの書式は似たようなものですが......。)
userChrome.css は、Firefox 本体のユーザーインターフェイスのスタイルをカスタマイズするときに使われます。
userContent.css は、Firefox のコンテンツエリアに表示される内容(通常は Web ページ)のスタイルをカスタマイズするときに使われます。
今回のご質問は、Firefox 本体の検索バーではなく、Firefox で表示した Google の Web ページの話なので、 userContent.css での対応になります。


以上です。間違ってたり余計な話だったらすみません。

作成者:  ebi [ 2010年10月21日(木) 12:56 ]
記事の件名:  Re: オートコンプリートの反転色

>偶然的通行人さん
回答ありがとうございます。
おかげさまで目的を達成できました!! :lol: :lol: :lol:

/* Google 検索のオートコンプリートのドロップダウンリストの選択背景色 */
@-moz-document
url-prefix(http://www.google.),
url-prefix(http://image.google.),
url-prefix(http://video.google.)
{
.gac_b td.gac_c {
color: white !important;
background-color:darkblue !important;}
}


>(補足)
>Firefox で表示された Google の検索ページのスタイルと、

ご心配いただいた内容はすべて的を得ております。勉強になります。
tet さんの内容を何気に.gac_b td.gac_cに変更したところ、
偶然にも思い通りにできました。URLもクォーテーションなしにできました。

ただ、ワイルドカードの類は使えないようなで、また省略は.comなどの後半部分
のみとなるようで上記の形になりました。

一年間悩んでいた問題があっさりと解決できました。
みなさま本当にありがとうございました。

作成者:  aides [ 2010年10月21日(木) 23:52 ]
記事の件名:  Re: オートコンプリートの反転色

解決した旨良かったですね。
当方ではweb上のフォームのオートコンプリート等やコンキストメニューの背景色等がテーマのソレとは違ってた場合は別のアドオンの影響が関係してました。
因みに「CuteMenus」~ https://addons.mozilla.jp/firefox/details/1330 ~がソレでした。

一応スクリーンショットは以下を参照で。
http://5.dtiblog.com/a/aides/file/20101021firefox.png

ページ 11 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/