[MySpace のデザインを変更する：第六回] 検索ボックスのデザインを変更する

★変更を記述するページ

ホーム > プロフィール変更 もしくは デザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit

★変更方法（入力スペース）
背景を黒の透明度 50%、枠線は青だとこんな感じ。

<style>
form[id="formSearch_Header"] .srchfieldLayer {
background: rgba(0, 0, 0, 0.5);
background-color: transparent !important;
border: 1px solid rgb(0, 102, 255);}
</style>

background を使う場合は、background-color に !important を記述しないと反映されない。また、入力ボックスの背景や文字色は MySpace 側で !important が付いているために、残念ながら変更できない。

★変更方法（検索ボタン）
背景を黒の透明度 70%、枠線は青だとこんな感じ。

<style>
input[id="submit_Header"] {
background: rgba(0, 0, 0, .7) !important;
border: 1px solid rgb(0, 102, 255) !important;
}
</style>

background も border も !important を付けないと反映されない。

★変更方法（「MySpace」を押したときに出るドロップダウンメニュー）
平常時は黒の透明度 20% を背景に持ち、hover 時にベタ黒の背景になるようにするにはこんな感じ。

<style>
div[id="srchMenuListBox_Header"] li {
background: none !important;
padding: 0px !important;
}
div[id="srchMenuListBox_Header"] li a {
background: rgba(0, 0, 0, 0.2) !important;
display: block !important;
padding: 2px 5px 2px;
}
div[id="srchMenuListBox_Header"] li a:hover {
background: rgb(0, 0, 100) !important;
}
</style>

まず、div[id="srchMenuListBox_Header"] li で MySpace 側で設定している背景を消し、余白を消している。ここでいぢっている li の中にある a は背景が設定可能だが、li 自身はまた変えられないので、li の部分を見せないために、余白は消さないといけない。
次に div[id="srchMenuListBox_Header"] li a でメニューの背景等を設定する。display: block; でブロック要素にし、padding を有効にする。これをしないと左右が余りにも詰まった感じがして息苦しい。
最後に div[id="srchMenuListBox_Header"] li a:hover で背景色を設定する。

残念ながら文字色は !important 設定がなされているために変更できない。

★確認環境
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads