<p dir="auto">This bug is in reference to this style block from forms.less, shown below. In a nutshell, as soon you start typing into an input field with type=email the text and border instantly turn red. The user gets the following experience with that input field:</p>
<ol dir="auto">
<li>unfocused and blank - border is black</li>
<li>focused, but still blank - border is red (if required=true)</li>
<li>enters "a" - border and text are red</li>
<li>"a@" - border and text are red</li>
<li>"a@b" - border is blue, text is black</li>
</ol>
<p dir="auto">Note that the user still hasn't even finished entering their email address, even if the email address is technically legal according to the RFC. Tested with recent versions of Firefox and Chrome.</p>
<p dir="auto">The red color is premature and scary. I need more explicit control for when the text (and border) turn red. All of the HTML5 input validation attributes result in similar problems. The rules below are a little too aggressive, in my opinion. Can we make them optional, move them into a js plugin, etc.?</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// HTML5 invalid states
// Shares styles with the .control-group.error above
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
  &amp;:focus {
    border-color: darken(#ee5f5b, 10%);
    @shadow: 0 0 6px lighten(#ee5f5b, 20%);
    .box-shadow(@shadow);
  }
}"><pre class="notranslate"><span class="pl-c1">/</span><span class="pl-c1">/</span> HTML5 invalid states
<span class="pl-c1">/</span><span class="pl-c1">/</span> Shares styles with the .<span class="pl-c1">control-group</span>.<span class="pl-c1">error</span> <span class="pl-ent">above</span>
<span class="pl-ent">input</span><span class="pl-kos">:</span><span class="pl-c1">focus</span><span class="pl-kos">:</span><span class="pl-c1">invalid</span><span class="pl-kos">,</span>
<span class="pl-ent">textarea</span><span class="pl-kos">:</span><span class="pl-c1">focus</span><span class="pl-kos">:</span><span class="pl-c1">invalid</span><span class="pl-kos">,</span>
<span class="pl-ent">select</span><span class="pl-kos">:</span><span class="pl-c1">focus</span><span class="pl-kos">:</span><span class="pl-c1">invalid</span> {
  <span class="pl-c1">color</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>b94a48</span>;
  <span class="pl-c1">border-color</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>ee5f5b</span>;
  <span class="pl-ent">&amp;</span><span class="pl-kos">:</span><span class="pl-c1">focus</span> {
    <span class="pl-c1">border-color</span><span class="pl-kos">:</span> <span class="pl-en">darken</span>(<span class="pl-pds"><span class="pl-kos">#</span>ee5f5b</span><span class="pl-kos">,</span> <span class="pl-c1">10<span class="pl-smi">%</span></span>);
    <span class="pl-k">@shadow</span><span class="pl-kos">:</span> 0 0 6px lighten(<span class="pl-kos">#</span><span class="pl-c1">ee5f5b</span><span class="pl-kos">,</span> 20%);
    .<span class="pl-c1">box-shadow</span>(<span class="pl-k">@shadow</span>);
  }
}</pre></div>
<p dir="auto">The title is quite explicit :)</p>
<p dir="auto">If you define a input type with a tag required, when the user focuses the input, a red border appears even if the user hasn't entered nor did anything.</p>
<p dir="auto">It's feel like something is wrong but nothing has been done yet.</p>
<p dir="auto">The normal state should be blue.</p>