Firefox および WebKit ブラウザーでデフォルトの境界線を失わずに、背景画像をテキスト入力に適用するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/1100409

質問

何らかの理由で、最近のほとんどのブラウザでは、背景画像を指定すると、テキスト ボックスにデフォルトの入力枠スタイルが適用されなくなります。代わりに、醜い挿入スタイルが得られます。私の知る限り、デフォルトのブラウザスタイルを適用するCSS方法もありません。

IE 8 ではこの問題は発生しません。Chrome 2 と Firefox 3.5 はそうしており、他のブラウザも同様だと思います。オンラインで読んだところによると、IE 7 にも同じ問題がありますが、その投稿には解決策がありませんでした。

以下に例を示します。

<html>
<head>
  <style>
    .pictureInput {
      background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
      background-position: 0 1px;
      background-repeat: no-repeat;
    }
  </style>
<body>
  <input type="text" class="pictureInput" />
  <br />
  <br />
  <input type="text">
</body>
</html>

Chrome 2 では次のようになります。 http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6

Firefox 3.5 では次のようになります。 http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc

アップデート：JS ソリューション: 私はまだ純粋な CSS on-the-input ソリューションを見つけたいと思っていますが、現時点では次の回避策を使用します。これは私のアプリから直接貼り付けられたものであるため、上記のような優れたスタンドアロンの例ではないことに注意してください。大規模な Web アプリから関連する部分を取り込んだだけです。そのアイデアは理解できるはずです。HTML は「link」クラスの入力です。背景の縦位置が大きいのはスプライトだからです。IE6、IE7、IE8、FF2、FF3.5、Opera 9.6、Opera 10、Chrome 2、Safari 4でテスト済み。一部のブラウザでは背景の位置を数ピクセル微調整する必要があります。

JS:

 $$('input.link').each(function(el) {
   new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
   if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
 });

CSS:

input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }

アップデート：CSS で十分な解決策を閉じる: kRON からの提案に基づいて、Vista で入力を FF と IE に一致させるための CSS を以下に示します。これは、純粋なデフォルトを放棄して 1 つのスタイルを強制する場合に良い選択となります。これを少し変更して、「青みがかった」エフェクトを追加しました。

CSS:

input[type=text], select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 1px #e3e9ef solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
    border-top: 1px #5794bf solid;
    border-left: 1px #c5daed solid;
    border-right: 1px #b7d5ea solid;
    border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
役に立ちましたか？

解決

テキスト入力の境界線または背景スタイルを変更すると、非常に基本的なレンダリング モードに戻ります。OS スタイルのテキスト入力は通常、ドキュメントの上にレンダリングされるオーバーレイ (Flash と同様) です。

あなたの問題を純粋に CSS で修正できるとは思えません。私の意見では、一番良いのは、好きなスタイルを選択し、CSS でエミュレートすることです。そのため、どのブラウザを使用していても、入力は同じように見えます。ホバー効果なども引き続き使用できます。OS X スタイルのグロー効果は難しいかもしれませんが、実行可能であると確信しています。

@アレックス・モラレス:あなたのソリューションは冗長です。国境：0;境界線を優先して無視されます。1px ソリッド #abadb3;その結果、不要なバイトがネットワーク上で転送されることになります。

他のヒント

これは、デフォルトのルックバックを提供できる私が使用する CSS です。

input, select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 2px #f1f4f7 solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

応募することもできます :active そして、コントロールに次のことを与えます 青っぽい 選択したら色相を変更します。

アップデート！

さて、これはクロスブラウザー互換性があると思われる回避策です。唯一の問題は、デフォルトのスタイルが数ピクセル異なるため、多少の調整が必要になる可能性があることです。

<html>
    <head>
        <style>
            .pictureInput {
                text-indent: 20px;
            }
            .input-wrapper {
                position:relative;
            }
            .img-wrapper {
                position:absolute;
                top:2px;
                left:2px;
            }
        </style>
    </head>
    <body>
        <div class="input-wrapper">
            <div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
            <input type="text" class="pictureInput" />
        </div>
        <br />
        <br />
        <input type="text">
    </body>
</html>

絶対相対配置を使用すると、絶対 div (画像を含む) をその親に対して絶対的に動作させることができます。これは、私が知っているすべてのブラウザー (IE6 未満のバージョンはカウントせず、IE6 以降は問題ありません) で処理できます。ユーザーのスケーリングが問題になる可能性がありますが、回避策は次のとおりです。

利点としては、入力のスタイルを変更する必要がまったくないことです (text-indent を除いて、とにかくそうしてほしいと願っています)。

欠点としては、これは最も良い回避策ではないということです。

古い！

これがあなたが望んでいることではないことはわかっていますが、少なくともすべての入力境界線の一貫性を保つために、このようなことを行うことはできます。

input {
    border-color:#aaa;
    border-width:1px;
}

example image

すべてのブラウザで試したわけではありませんが、境界線のスタイルを設定していないため、ネイティブ スタイルを別のサイズで使用する可能性があります (ただし、これをスキップすることもできます)。重要なのは、境界線の色を何かに設定して、すべての入力フィールドが同じ境界線の色を使用し、残りはブラウザーに任せることだと思います。

私はテキストの背景画像を持っていましたが、これも煩わしかったです。そこで、<input> の周りに相対的な <div> を配置し、<input> の上に絶対的に配置された画像を追加しました。

もちろん、画像がクリックされた場合、または入力がタブ移動や画像の端の周りをクリックされた場合にフォーカスを取得した場合に画像を非表示にするために、もう少し Javascript が必要でした。

少しいじるだけで、これは IE8、Firefox、Chrome、Opera ではかなりうまくいくように見えましたが、これは恐ろしい手間であり、ブラウザーが修正してくれれば良いのですが。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top