title: How to change the highlight color of textbox using focus selector in css
body: <p>I'm new to <strong>CSS</strong>. I have a input text field where I need to change the color of the border from red to another color. I used focus selector in <strong>CSS</strong> and was not successful.<br>
  <strong>Below is the input field :</strong></p>
  
  <pre><code>&lt;label&gt;Phone&lt;font color="red"&gt;*&lt;/font&gt;&lt;/label&gt;&lt;br&gt;
  &lt;span&gt;
      &lt;input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value=""  type="text"&gt; -
  &lt;/span&gt;
  &lt;span&gt;
      &lt;input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"&gt; -
  &lt;/span&gt;
  &lt;span&gt;
      &lt;input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value=""  type="text" required &gt;
  &lt;/span&gt;  
  </code></pre>
  
  <p><strong>And the css :</strong></p>
  
  <pre><code>.element text:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  }  
  </code></pre>
  
  <p><strong>Edit :</strong>
  When I click submit form, as it is a required field, this shows red if empty. 
  Now it is not working. How can I change the highlight color of the textbox when I focus on it.</p>