text フォームに背景を設定した時の挙動

質問

<input type="text">
に、CSS による背景をつけました（ただの段差が付いた白い領域、というのを変更したかった）。CSS は次の通り。
.myinputtext {
height: 15px;
width: 57px;
background-image: url(/Resource/inputtext.png);
background-repeat: no-repeat;
font-size: 9px;
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 2px;
overflow: hidden;
}

外観は望みどおりのものが出来たのですが、背景画像以上に幅を取る文字数を入力すると、その入力欄（背景の画像）を超えて文字が入力されてしまいます。overflow をhidden にしても回避できません。
幅を超える文字数入力があったときに、なんとかデフォルトの text input と同様に文字だけをスクロールさせたいのですが、何かうまい方法はあるでしょうか。

回答No.1

steel_gray · ベストアンサー

FirefoxやOperaでは文字があふれてスクロールしても背景が一緒に動くこともないですね。

スクロールって事で
background-attachment:fixed;
を、加えてみるとIEでも文字と共に流れる事はなくなりました。
ただ、こうすると今度は他のブラウザで背景画像が表示されなくなるようです。

この辺りの挙動はどのブラウザが正しいかわかりませんがとりあえず追加で
<!--[if IE]>
<style type="text/css">
.myinputtext {
background-attachment:fixed;
}
</style>
<![endif]-->
と、しておくと試したブラウザではいい感じでした。
（Safariとかその他ブラウザでどうかはわかりません。）

お礼

steel_gray さん、フォローありがとうございます。

ぴしゃり <!--[if IE]> ～ <![endif]--> でうまくいきました。

こんなタグがあったんですね…。マイクロソフトも標準から非互換であることを自覚しているんでしょうか。