CSSの動かないコード（中級編）　Windowsのデスクトップテーマが「XP」の時，ボタンに背景画像を表示したい

クイズ… 下記の HTML＋CSS が，意図した通りに表示されないのはどうしてですか。（制限時間１分）

やりたい事：

ボタンの背景に，画像を表示したい。

<style>
  input {
    /* ボタンの背景に画像を表示する */
    background-image : url(fuga.PNG);
    
    /* 背景画像は繰り返さず，左端に１つだけ表示 */
    background-repeat : no-repeat;
    
    /* 背景画像の右隣に，ボタンの文言が見えるようにする */
    padding-left : 50px;
  }
</style>

<input type="button" value="hoge">

※なお，fuga.PNGのサイズは50px以下とする。

発生する問題

Windowsのデスクトップ・テーマが「Windows クラシック」であれば，

IEでもFFでも，ボタンの左端に背景画像がちゃんと表示される。

しかし，もしWindowsのテーマが「Windows XP」に設定されていると，

IEでは背景画像が表示されない。

（Firefoxでは表示されるのに。）

原因

Windowsのテーマを変えると，フォーム部品の描画方法が若干変わる。

CSSの見え方も若干変わる。

WinXPのクラシックスタイルとXPスタイルでマージンが異なる
http://oshiete.goo.ne.jp/qa/3908639.html

クラシックスタイルとルナスタイル（XP）はオブジェクトのサイズが若干違う為ずれてしまうことがあります。

プログラミングでもこのことを考慮して若干ゆとりを持たせて設計

ファイルアップロードフォームに背景色を設定するとボタンがクラシックになる
http://d.hatena.ne.jp/replication/201...

XP 視覚テーマが有効である場合、IE は選択された MSSTYLES にそってコントロールを描画します。同じ IE を使っていても、Windows 2000 では、XP 視覚テーマがないため、このようなことにはなりません。

面白いのが、自前で style (CSS) を適用すると、そのコントロールに限って、視覚テーマが無効になります。何も、input type="file" に限ったことではない

Windows XP vs. Windows Classic Input Box Apperance
http://www.tek-tips.com/viewthread.cf...

When a "class" is assigned to an Input Box, the Input Box displays in Windows Classic mode

as soon as you start applying custom styles to an input box, its style reverts to the old pre-XP style

解決策

「XPモード」のIEで，ボタン要素の背景に画像を表示する方法として，２つのやり方がある。

（１）background-color属性を指定する。

background-color属性に何らかの値を入れておけば，XPモードであってもその部品だけはクラシック表示される。

Button background image is showing in FF but not in IE
http://www.sitepoint.com/forums/showt...

Try setting background-color: transparent;

<style>
  input {
    /* ボタンの背景に画像を表示する */
    background-image : url(fuga.PNG);
    
    /* 背景画像は繰り返さず，左端に１つだけ表示 */
    background-repeat : no-repeat;
    
    /* 背景画像の右に，ボタンの文言が見えるようにする */
    padding-left : 50px;
    
    
    /* 追加：背景色を指定 */
    background-color : #D4D0C8;
    
  }
</style>

<input type="button" value="hoge">

これでOK。

（２）button要素を使って書き換える。

別の手。buttonタグに入れ替える。

<button>
  <img src="fuga.PNG">
  hoge
</button>

これなら，クラシックモードでもXPモードでも，ボタンの左端に画像が表示される。

paddingを指定しなくてよいので楽。

補足

なお，「現在適用されているWIndowsテーマをJavaScriptで判別する関数」が下記URLにある：

javascript: detect if XP or Classic windows theme is enabled
http://stackoverflow.com/questions/24...

button要素を動的に生成し，その背景色が rgb(236,233,216) であれば，現在のテーマは「Windows XP」である

また，さまざまなOS・ブラウザの組み合わせで，input要素がどう見えるかの一覧表が下記URLにある：

Styled single line text inputs
http://www.456bereastreet.com/lab/for...