Обязательное поле ввода получает границу, когда значение пусто, а цвет стилизован

Не могли бы вы объяснить мне это?

Запустите это в 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);
});

Подождите три секунды, и ввод получит красную рамку. Почему? Это ошибка Firefox?

Обратите внимание, что я использую Firefox 18.0.2.

Спасибо.


input html css border required
person user1608790    schedule 15.02.2013    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Атрибут HTML5 required, очевидно, интерпретируется firefox как включающий красную рамку, вот ответ об его удалении

Firefox 4 Обязательная форма ввода КРАСНАЯ рамка/контур

так что просто сделайте:

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

фиксированный

person Liam    schedule 15.02.2013

arrow_upward
1
arrow_downward

Это не ошибка, это то, как Firefox подчеркивает, что для этого ввода требуется значение.

required поддерживается Firefox: 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;
}
person jerone    schedule 15.02.2013
comment
Это происходит, когда элемент ввода также выбирается селектором идентификатора. - person user1608790; 15.02.2013