0

jQuery検証エンジンを使用していくつかのフォームフィールドを検証しています。IE7とIE8を除いて、すべてが正常に機能しています。

スタイルシートには：focusクラスがあり、フォームフィールドがフォーカスされているときに青いボックスシャドウを提供します。

input:focus { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #06c !important; -moz-box-shadow: 0px 0px 1px 1px #06c; box-shadow: 0px 0px 1px 1px #06c; }

jQueryを使用して、フォームフィールドが無効な場合（jQuery検証エンジンで定義されている）にクラスをフォームフィールドに追加して、これらのフィールドに赤いボックスシャドウを付けることができます。

input.error { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #c00 !important; -moz-box-shadow: 0px 0px 1px 1px #c00; box-shadow: 0px 0px 1px 1px #c00; }

これはうまく機能します...IE9、Firefox、およびChromeで。IE8または7では機能しません（IE6のサポートを停止したときにパーティーがありました）。PIE.htcをインストールし、ボックスシャドウではなく、これらの要素の境界線を示すスタイルオプションを追加してみましたが、役に立たなかったようで、エラーバブルで他の表示の奇妙さを引き起こしたので、PIE.htcを削除しました。次に、IE条件付きタグで囲まれ、それらの入力の境界線を指定する別のスタイル定義を作成しようとしましたが、それでも機能しませんでした。これが私の条件付きCSSです：

<!--[if lte IE 8]>
<style type="text/css">
input:focus { border: 1px solid #06c; }
input.error { border: 1px solid #c00; }
</style>
<![endif]-->

...ヘルプ？

4

1 に答える 1

0

これらのブラウザですべてがサポートされているわけではありません。それと一緒に住んで、追加のメッセージを表示するなど、別の方法を見つけてください。または、入力要素をdiv内に埋め込むこともできます。

​div.invalid {
    display: inline-block; 
    border: 1px solid red;
}​

<div class="invalid">
        <input type="text"/>
</div>​​​​​​​​​​​​​​​​​

このような要素を追加し始める場合は、JQueryでも、できればIE7と8にのみ含まれている別のコードで追加するので、不要になったときに簡単に削除できます。または、常にdivを使用し、div.invalid input{...}他のブラウザのスタイルを設定することもできます。

于 2012-09-10T20:31:27.577 に答える