web-dev-qa-db-ja.com

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

何らかの理由で、最新のブラウザのほとんどは、テキストボックスに背景画像を指定すると、デフォルトの入力境界線スタイルのテキストボックスへの適用を停止します。代わりに、そのい挿入スタイルを取得します。私が言えることから、デフォルトのブラウザスタイルを適用する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 Solution：まだ入力時にCSSの純粋なソリューションを見つけたいと思っていますが、ここで使用する回避策があります今。これはアプリから直接貼り付けられるため、上記のようなスタンドアロンの例ではないことに注意してください。大規模なWebアプリから関連する部分を含めました。あなたはアイデアを得ることができるはずです。 HTMLは、「link」クラスの入力です。大きな垂直背景位置は、スプライトだからです。 IE6、IE7、IE8、FF2、FF3.5、Opera 9.6、Opera 10 ,、 Chrome 2、 Safari4。一部のブラウザでは、背景の位置を数ピクセル調整する必要があります。

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 Close Enough Solution：kRONからの提案に基づいて、入力をFFおよびIE = Vistaでは、純粋なデフォルトを放棄し、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; }
cssinputborderbackground-image
31
Jade Ohlhauser

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

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

@アレックスモラレス：あなたのソリューションは冗長です。ボーダー：0;境界線を優先して無視されます：1px solid＃abadb3;不要なバイトが回線を介して転送されます。

10
sholsinger

これは、デフォルトのルックバックを提供できる、私が使用する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を適用し、コントロールが選択されたらblueish hueと指定することもできます。

6
Filip Dupanović

更新！

わかりました、ここにクロスブラウザ互換性があると思う回避策があります。唯一の問題は、デフォルトのスタイルが数ピクセル異なるため、微調整が必​​要になる場合があることです。

<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 +は問題ありません）が処理できる親に対して絶対に動作させることができます。ユーザーのスケーリングが問題になる可能性がありますが、これが回避策の方法です。

利点は、入力のスタイルをまったく変更する必要がないことです（テキストのインデントを除きますが、とにかくそうすることを望みます）。

マイナス面として、それは最もきれいな回避策ではありません。

古い！

私はこれがあなたが望むものではないことを知っていますが、少なくともすべての入力ボーダーを一貫させるためにこのようなことをすることができます。

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

example image

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

2
varl

テキストの背景画像がありましたが、これも迷惑でした。そこで、<input>の周りに相対<div>を配置し、<input>の上に絶対に配置された画像を追加しました。

それからもちろん、画像がクリックされた場合、または入力がタブ移動、または画像の端でクリックされた場合に画像を非表示にするために、もう少しJavaScriptが必要でした。

IE8、Firefox、Chrome、Operaでこれは少しいじくりまわしましたが、恐ろしい出来事であり、ブラウザで修正すればい​​いでしょう。

0
Steve Teale