Загрузочный лоток: граница ввода текста становится черной, прежде чем применять серию CSS-применений?

Question

Вот визуализация моей проблемы:

Я использовал CSS, чтобы сделать границы светло-серым цветом, но в течение миллисекунды они по умолчанию черной каймы перед включением светло-серого цвета. Я бы очень оценил, может ли кто-нибудь дать мне совет по этому поводу!

HTML файл

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

CSS границы часть

/*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; 
} 

Я использую Bootstrap и работает мой HTML-файл на Chrome, если это актуально.

JSFiddle of my problem

Answer 1

Если вы меняете:

input[type="text"]:focus, 
input[type="text"]:hover { 
    border: 1px solid #cccccc; 
    border-radius: 8px; 
} 

To:

input[type="text"] { 
    border: 1px solid #cccccc; 
    border-radius: 8px; 
} 

Ваш серый контур остается, цвет глюк удаляется, но фокус ваш план действительно меняется синий.