输入元素周围的随机红色边框

Question

Does anyone know what the red border that sometimes gets put around input elements on webpages is? Is it from HTML5 or jQuery? I have seen it when I am using required as an attribute and also when I use jQuery's change function (as well as on("change") , obviously). At first I thought it was when you don't have the right pattern in an input field on form submit, but recently I found it happening with this code:

<form id="assessform" action="assessment.php" method="post" enctype="application/x-www-form-urlencoded" name="assessform">

    <div data-test-ques="met_with">

        <label data-test-num="met_with" for="met_with">Met With </label>

        <input type="text" name="met_with" id="met_with" value="" required="required" autofocus="autofocus" />

    </div><br /><br />

    <div data-test-ques="taken_by">

        <label data-test-num="taken_by" for="taken_by">Assessment Taken By </label>

        <input type="text" name="taken_by" id="taken_by" value="" required="required" />

    </div>
</form>

jQuery code:

$("#met_with, #taken_by").change(function() {
    if($("#met_with").val() == met_with || $("#taken_by").val() == taken_by) {
        met_taken_change = 0;
    }
    else {
        met_taken_change = 1;
    }
});

I get the required thing, but why here?

Screenshot attached.

Answer 1

It's not a random behavior, it's just a different implementation of the html5 spec in FF for the 'required' input attr.

FF adds a red border to help us focus on the problem, you can see it here .