1

Chrome ではbackground-color、テキスト入力フィールドの を設定でき、変更されるのは背景色だけです。このようにして、注意が必要なフィールドを強調表示できます (背景を赤くして、ユーザーが間違いを認識できるようにします)。Firefox では、他のブラウザーと思われますが、背景色が変更されていますが、テキスト フィールドもよりプレーンに見えます。挿入された影が消え、フィールドに焦点を合わせると、周囲に青い輝きがなくなります。見た目が違うだけです。

Firefox (および他の同様のブラウザー) でルック アンド フィールを変更せずにテキスト フィールドを強調表示する方法はありますか?

更新: コード例:

<ul>
<li><input type="text" style="background-color: red"/></li>
<li><input type="text"/></li>
</ul>

2 つのテキスト フィールドの違いがわかります。通常のテキスト フィールドにカーソルを合わせてフォーカスすると、OS にネイティブに感じられます。しかし、背景が赤のテキスト フィールドは、もはや適切ではありません。

これがjsfiddleリンクです。

4

3 に答える 3

0

いいえ、そうは思いません。Opera は Firefox と同じ動作をします。私が思いついた最善の解決策は、ユーザーの注意が必要な場合 (要素にフォーカスがあるか、無効なデータが含まれている場合) にのみ要素のスタイルを設定することでした。

これは、Sass ブートストラップの一部として使用するものです。

@mixin background($image, $bgcolor) { background: $bgcolor url(#{$imagedir}#{$image}) no-repeat scroll right center }

input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
    font: inherit;
    // background-color background-image background-repeat background-attachment background-position

    &:required:valid, &:required:in-range {
        //border: 1px solid #0f0;

        &:focus { outline: 1px solid #0f0; @include background("tick.png", transparent); }
    }

    &:invalid, &:out-of-range {
        @include background("asterisk_orange.png", $required-bg);
        border: 1px solid $required-color;

        &:focus {
            background-image: url("#{$imagedir}exclamation.png"); outline: 1px solid $required-color;
        }
    }
}

生成された CSS は次のようになります。

input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
  font: inherit;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:valid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:in-range:focus, textarea:required:valid:focus, textarea:required:in-range:focus, select:required:valid:focus, select:required:in-range:focus {
  outline: 1px solid #0f0;
  background: transparent url(icons/silk/tick.png) no-repeat scroll right center;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range, textarea:invalid, textarea:out-of-range, select:invalid, select:out-of-range {
  background: #fef8b4 url(icons/silk/asterisk_orange.png) no-repeat scroll right center;
  border: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range:focus, textarea:invalid:focus, textarea:out-of-range:focus, select:invalid:focus, select:out-of-range:focus {
  background-image: url("icons/silk/exclamation.png");
  outline: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus + .tip, textarea:focus + .tip, select:focus + .tip {
  display: inline;
  position: absolute;
  border: 1px solid red;
  background: #fef8b4;
  margin: 0;
  padding: 2px .5em;
}

Opera の場合、境界線/背景のように、アウトラインによって要素のデフォルトのスタイルが失われないことに注意してください。

于 2012-09-20T18:02:01.630 に答える
0

当時、同じ問題が発生しました。背景色を変更したい場合は、Firefox の境界線スタイル、2px ソリッド、および選択した色を変更する必要があるようです。

于 2012-09-20T17:36:10.537 に答える
0

これらの人は解決策を思いつきました。これをチェックすることをお勧めします：http://formalize.me/

フォームの外観を標準化して、すべてのブラウザーとオペレーティング システムでフォーム要素が一定に保たれるようにします。

軽く実行して、次のように制御することができます: http://jsfiddle.net/uUp3g/1/

乾杯

于 2012-09-20T18:19:53.173 に答える