スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2006.04.22

Firefox の検索バーの長さを変更する

この方法は検索すると直ぐにでてくるように、 userChrome.css に次のように記述します。

.searchbar-textbox {
  width: 250px !important;
 }

ところが Mac 版の Firefox でこれをすると、こんな間抜けなことになってしまいます。

060422_sbar1.png

なんでこんなことになるかというと、検索バーの部分に背景画像が充てられているんですが、これが一枚の画像なんですね。だからその画像以上や以下の長さにするとこういった間抜けなことになってしまうという訳でして。せめて両端の半円部分と、真ん中部分とに画像を分けておけばいいのに、と思ったので Smoke というテーマを参考、というかほとんど拝借してこうしてみました。

#search-container {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAYCAYAAAAlBadpAAAABGdBTUEAANkE3LLaAgAAAZJJREFUeJyklL2KwkAQgH0Cn0d8B3trO5%2FARxAEG4tAMCCCaKMBlRRiIygElSAinprzXyNIxNPVBPydm00h5xk591z4uv12Z2Znx%2BF4ZwHAA8Fg0Il4ER5REILAbx7EUCjkCYfDEs%2FzkEgkIJPJQD6ft5Ak6Y47ESV%2FNBrVRVGERqMB0%2BkUttstnE4nsFs3MRKJ%2BOLx%2BL5Wq8FyubTdbCtzHOeOxWKDSqUCu93uJfEmC4LA0VBns9nLoiVjqK5UKkWq1erT3J7KyWQykM1mod%2FvM4mWnE6nxWKxCKvVil3O5XLdcrkMpmmyy4VCwajX63C5XNjlUqlkNJvN%2F8myLHc%2F2m04HA7ssqIoYq%2FXA8Mw2OVWqxVQVRU2mw273Ol0XJ%2BqSnRdZ87bak%2B8maOtyfpclozd5R6Px4Ov9RrO5zObTBkOhz5tPt8TQuB4PLLJlNFo5Nc0TaetamL16fPRSK7X698yBcP3TCYTabFYAC3iGlOh04RC%2F%2FpPbAcgHuBEvAiPKAhBAA%2B9463J%2Bw0AAP%2F%2FAwAH2bL0MzgGlwAAAABJRU5ErkJggg%3D%3D") no-repeat left center !important;
  padding-left: 6px ;
  margin-left: 2px ;
  margin-right: 2px ;
}
#searchbar {
  -moz-appearance: none !important;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYCAYAAAD3Va0xAAABlUlEQVR42q2Uy2rCUBCG81h9ie677q5P4CMIghsXgaAgguhGAypZiBtBQVSCiFhr6l0jSCTVaIL3vydpQYJamxwHvsUJ4cuZmcwwDwuv14s7aASRwBFeCAyACxhBEHCLTCZjkUwmEY1GwXEc%2FH6%2F4PP5ni9EuBP7%2FR7L5RKj0Qi1Wg08zyMYDCpE%2BGYXOYzZbIZKpYJIJLIOBAKvNtFmt3MkW61WKBaLCIfDXZZlf0UuYzweW2mGQiHWpehcu3K5jHg8rpE0n4jIfXQ6HaRSKcRiMQ%2BVaD6fI5fLIZFI8FQiwzBQKBSQTqc%2FqETH4xHVahXZbFanFtXrdeTzeWeizXZrO2%2FJ%2Bb3ZRKlUcpba6XSynXVdR7vdhiiKdMVeLBaQJAmNRsPD0NRHURR8SpLWarUYhqL15piYN3I%2FIofDAV%2BqisFg0CV%2F98%2FQ%2FvXFa7Ejm0LTNMiTybrX65330T86Zd7AarWh69ZYyLKs9Pt9%2B2Iz7TcwN6OFqqpWYafTKYbDoUBSuly15CHuoBFEAkcw37%2B6%2FB8W3%2F6Wr8FqIZgyAAAAAElFTkSuQmCC") no-repeat right center !important;
  border: none ;
  margin: 0px ;
  padding-right: 6px ;
}
#searchbar .autocomplete-textbox-container, 
#searchbar .searchbar-textbox {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAWCAMAAAA7BnbfAAAAD1BMVEWHh4e1tbX%2F%2F%2F%2Fz8%2FPh4eHGWtAzAAAAH0lEQVR42s3FMREAAAjEsMLjXzNDDw9kCadE680RowVdOAE1mQ5bZQAAAABJRU5ErkJggg%3D%3D") !important;
}
#searchbar .autocomplete-textbox-container {
  -moz-appearance: none !important;
  background-color: transparent ;
  border: none ;
  margin: 0px !important;
  padding: 0px !important;
}
#searchbar .searchbar-textbox {
  -moz-appearance: none !important;
  background-color: transparent ;
  width: 250px !important;
  padding: 0px !important;
  border: none;
}
#searchbar-dropmarker {
  margin-left: 2px !important;
}

上記の css を適用するとこういった感じになります。

060422_sbar2.png

長さを変えたい場合は、.searchbar-textbox の width プロパティの値を変更してください。

Tags: , ,

関連記事

この記事へのトラックバックURL
http://wildlifesanctuary.blog38.fc2.com/tb.php/72-3ec34bcf
この記事へのトラックバック
便利なFireFox拡張機能を見つけた。
Searchbar Autosizer | はじめの一歩 at 2006.05.09 02:33
Firefox 2 では Mac でも userChrome.css に以下のように書いておくと、検索バーの長さを変更出来ます。Windows でも多分同じだと思います。1.x の時と違って普通になって良かった。#search-container, #searchbar {
Firefox 2 の検索バーの長さを変更する | 鳥獣保護区 at 2006.11.01 20:20
この記事へのコメント
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。