title: How to change focus color when input is filled in with required attribute javascript/html/css
body: <p>I am working on a HTML Form. I have added required elements to some of my input fields. Because I am using Bootstrap the input fields are by default blue when it focus. I have set the required input fields to a red color with <code>input:required:focus {border: 1px solid red;}</code>. Now, when the required input fields are filled in I want to change the input field border to green. My question, is this possible with CSS and how? If not, How can I achieve this with Javascript or something else?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input:required:focus {
    border: 1px solid red;
    outline: none;
  }
  textarea:required:focus {
    border: 1px solid red;
    outline: none;
  }
  .form-horizontal {
    padding-left: 15px;
    padding-right: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;form class="form-horizontal"&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label class="col-md-2 control-label" for="Name"&gt;
        Full name &lt;span class="required"&gt;*&lt;/span&gt;
      &lt;/label&gt;
      &lt;div class="col-md-10"&gt;
        &lt;input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text"&gt;
        &lt;span class="format-block"&gt;&lt;a data-toggle="tooltip" data-placement="right" title="John Doe"&gt;Format&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label class="col-md-2 control-label" for="email"&gt;
        E-mail &lt;span class="required"&gt;*&lt;/span&gt;
      &lt;/label&gt;
      &lt;div class="col-md-10"&gt;
        &lt;input id="email" name="email" placeholder="E-mail" class="form-control input-md" required="" type="email"&gt;
        &lt;span class="format-block"&gt;&lt;a data-toggle="tooltip" data-placement="right" title="johndoe@gmail.com"&gt;Format&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label class="col-md-2 control-label" for="phone"&gt;
        Phone number
      &lt;/label&gt;
      &lt;div class="col-md-10"&gt;
        &lt;input id="phone" name="phone" placeholder="Phone number" class="form-control input-md" type="text"&gt;
        &lt;span class="format-block"&gt;&lt;a data-toggle="tooltip" data-placement="right" title="Only numbers"&gt;Format&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label class="col-md-2 control-label" for="question"&gt;
        Question &lt;span class="required"&gt;*&lt;/span&gt;
      &lt;/label&gt;
      &lt;div class="col-md-10"&gt;
        &lt;textarea rows="20" cols="40" class="form-control" id="question" required="" name="question"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-10 col-md-offset-2"&gt;
      &lt;button type="submit" class="btn btn-default formbuttonalign"&gt;Send mail!&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>