31

背景画像を指定すると、何らかの理由で、最新のブラウザーのほとんどは、デフォルトの入力枠スタイルをテキスト ボックスに適用しなくなります。代わりに、醜い挿入スタイルが得られます。私が知る限り、デフォルトのブラウザー スタイルを適用する 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 では次のようになります。

Firefox 3.5 の場合: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc

更新: JS 解決策:純粋な CSS-on-the-input ソリューションを見つけたいと思っていますが、今のところ使用する回避策を次に示します。これは私のアプリから直接貼り付けられているため、上記のようなスタンドアロンの良い例ではないことに注意してください。大規模な Web アプリから関連する部分を含めました。あなたはその考えを得ることができるはずです。HTML は「リンク」クラスの入力です。背景の縦位置が大きいのはスプライトだからです。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 Close Enough Solution: 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; }
4

4 に答える 4

6

これは私が使用する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のコントロールを適用して指定することもできます。

于 2009-08-24T12:23:44.663 に答える
2

アップデート！

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

<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;
}

サンプル画像

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

于 2009-07-09T09:26:23.320 に答える
0

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

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

少し手を加えるだけで、これは IE8、Firefox、Chrome、および Opera でかなりうまくいったように見えましたが、これはひどい扱いであり、ブラウザが修正してくれるといいのですが。

于 2012-06-30T11:57:53.760 に答える