3

これについて説明していただけますか？

これを Firefox で実行します: http://jsfiddle.net/eMa8y/24/

HTML:

<html>

    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>

    <body>
        <form>
            <input type="text" placeholder="input" required />
            <input type="text" placeholder="input" />
        </form>
    </body>

</html>

CSS:

input {
    color:black;
}
[required] {
    color:red;
}

脚本：

$(document).ready(function () {
    setTimeout(function () {
        $("input").val("");
    }, 3000);
});

3 秒待つと、入力に赤い境界線が表示されます。なんで？Firefoxのバグですか？

Firefox 18.0.2 を使用していることに注意してください。

ありがとう。

4

2 に答える 2

9

HTML5 属性requiredは明らかに、Firefox によって赤い境界線を含むように解釈されています。

Firefox 4 必須の入力フォーム 赤い境界線/アウトライン

だからただやってください：

[required] {
    color:red;
    box-shadow: none;
}

修繕

于 2013-02-15T12:58:08.307 に答える
1

これはバグではなく、Firefox がその入力に値が必要であることを強調する方法です。

requiredFirefox でサポートされています: https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-required

詳細はこちら: http://www.html5tutorial.info/html5-required.php

スクリプトは DOM で作成された順にすべての入力をループするため、背後に入力があるため、必要な入力はフォーカスを失います。したがって、Firefox の検証を呼び出して、その入力に値があるかどうかを確認します。

内部 Firefox スタイル:

:-moz-ui-invalid:not(output) {
    box-shadow: 0 0 1.5px 1px red;
}
于 2013-02-15T12:57:42.450 に答える