Required input field gets border when value is empty and color is in style
Could you explain this to me?
Run this in 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;
}
SCRIPT:
$(document).ready(function () {
setTimeout(function () {
$("input").val("");
}, 3000);
});
Wait three seconds and a red frame will appear at the entrance. What for? Is this a Firefox bug?
Please note that I am using Firefox 18.0.2.
Thank.
source to share
The HTML5 attribute required
is obviously interpreted by firefox to include a red border, here is the answer about removing it
Firefox 4 Required input form RED-border / outline
so simple:
[required] {
color:red;
box-shadow: none;
}
fixed
source to share
This is not a bug, as Firefox emphasizes that this entry requires a value.
required
Firefox supported: https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-required
More explanation here: http://www.html5tutorial.info/html5-required.php
Since your script goes through all the inputs in the order set in the DOM, your required input loses focus as there is an input behind it. So invoking Firefox check, checking if this input has a value.
Inner Firefox Style:
:-moz-ui-invalid:not(output) {
box-shadow: 0 0 1.5px 1px red;
}
source to share