Bootstrap: Input text border turning black before applying CSS-applied grey?
<p>Here's a visualization of my problem: 
<a href="https://i.stack.imgur.com/l65Id.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l65Id.gif" alt="enter image description here"></a></p>

<p>I used CSS to make the borders light grey, yet for a millisecond they default to a black border before turning light grey. I would really appreciated if someone could give me a tip on this!</p>

<p><strong>HTML file</strong></p>

<pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="container"&gt;
    &lt;form&gt;
      &lt;div class="row page-header"&gt;
        &lt;div class="col-lg-10"&gt;
          &lt;div class="form-group"&gt;
            &lt;input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-7"&gt;
          &lt;div class="form-group"&gt;
            &lt;div class="input-group input-group-lg"&gt;
              &lt;div class="input-group-btn"&gt;
                &lt;button type="button" id="Remove-Button" class="btn btn-default" aria-label="Remove"&gt;
                  &lt;span class="glyphicon glyphicon-minus-sign" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here"&gt;
              &lt;div class="input-group-btn"&gt;
                &lt;button type="button" id="Add-Button" class="btn btn-default" aria-label="Add"&gt;
                  &lt;span class="glyphicon glyphicon-plus-sign" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS borders part</strong></p>

<pre><code>/*Take away default black borders*/
input[type="text"] {
  outline: none;
  box-shadow: none !important;
  border: none;
}

/*Put grey borders when hover or click on input box*/
input[type="text"]:focus,
input[type="text"]:hover {
  border: 1px solid #cccccc;
  border-radius: 8px;
}
</code></pre>

<p>I'm using Bootstrap and running my HTML file on Chrome if that's relevant.</p>

<p><a href="https://jsfiddle.net/14ongm/k1pjs79c/" rel="nofollow noreferrer">JSFiddle of my problem</a></p>