私はjQuery Validationで検証されたフォームを作成しています。私は無効で修正する必要のある入力には、薄赤色の背景色を適用したいと思います。入力背景色はスタイリングを破壊しますか？
入力にbackground-color: #FFCCCC;を入力すると、魅力的なスタイリングが削除されているように見えて、硬い境界線で置き換えられます。例えば、Firefoxでテキスト入力で：
Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
（Live demo）
これは、いくつかのブラウザで発生します。また、私がを#FFFFFF以外に設定した場合にも発生します。
背景色を適用しながらスタイリングを維持する方法はありますか？
私は何とかスタイルをエミュレートするJavascriptソリューションを公開しています。
通常の入力フィールドがどのようなスタイルになっているか確認してください。それをエラーにも適用してください。
：
<p><input type="text" value="text" style="border:1px solid #999999;" /></p>
<p><input type="text" value="text" style="background-color: #FFDDDD;border:1px solid #999999;" /></p>
編集：あなたは、それはすべてのブラウザ間で一貫性を見て、少しだけMozillaで丸めないようにしたい場合は、あなたがより多くを行う必要があるでしょう作業。 Here's a linkこれは、テキストボックススタイルを完全に無効にする方法を示します。
ここでは、ブラウザがデフォルトのスタイリングを使用しています。
私は次のCSSのようなものを両方の入力に追加することをお勧めします。
border: solid 1px #ccc;
コントロールのデフォルト（Windows 2000）の外観は、ブラウザベンダーにとって実装が簡単です。ブラウザは、すべてのコントロールを含め、すべてを描画する必要があります。彼らがデフォルトスタイルでネイティブに見えるのは、ユーザーのためのちょっと便利なことですが、WPFのような本当に派手な（そして重量のある）ものがなければ、OS と CSSのビジュアルスタイルでコントロールを正しく描画することができなくなります。
正確なスタイルはOSにも依存するため、正確に1つのルックを与える解決策は、サイトのほとんどの訪問者が望むものではない可能性があります。次に、CSSのみを使用してThe One Look™を達成することができます。特定のOSでネイティブのものと同じように見える場合は、よくお試しください:-)
明るい灰色の枠線とホバーを使用して、少しエミュレートされている可能性があります/ライトブルーのものをフォーカスして、VistaとWindows 7のAeroの外観をエミュレートする。
短い答え：いいえ。
ブラウザとフォームコントロールは間違いなくCSSの一貫性のない部分です。私が提案できるのは、入力フィールドに1pxのボーダーを使用することです。ほとんどのブラウザーはこれに類似したものを使用しています。 CSS3の丸みのあるコーナーは、いくつかのブラウザでも動作するはずです。
input.text {
border: 1px solid #ccc;
background-color: #fcc;
border-radius: 4px;
-moz-border-radius: 4px;
}
this page at 456 Berea Streetが面白いでしょう。各ブラウザがテキストボックスに異なるスタイルを適用する方法を紹介します。
申し訳ありません - 入力要素のスタイルは、OS /ブラウザのデフォルトを破壊する傾向があります。デフォルトの入力は全く異なる方法でレンダリングされます。残念ながら、CSSスタイルとしてブラウザにコード化されているようなものではありません。
ここで行うべき最もよいことは、赤い背景の入力を通常のものに似せようとするのではなく、あなた自身の魅力的なスタイリングを作成することです！それらの明るい枠線が好きなら、border: 1px #ccc solidを使用してください。ラウンドコーナーが好きな場合は、border-radiusと-moz-border-radiusを利用してください。ブラウザ開発の端にいるユーザーには、そのユーザーがいます。そうでない人にとっては、違いを気付かないでしょう。要するに、入力をOS環境に適合させるのではなく、自分のサイトのルックアンドフィールに合わせてスタイルを設定してください。これはあなたのウェブサイト全体のためのより良いデザインを作成します:)
rewordしてくださいできますか？あなたが何を言っているのか分かりません。 = S – strager
私は彼があなたが境界線のためのデフォルトのスタイルを見て、背景を設定した後に手動で適用する必要があると思います。私はこれがうまくいくかどうかは疑問だが、背景が変わっただけでデフォルトのスタイルが変わらないからだ。しかし、コントロールのレンダリングは、:) – Joey