如何将状态文本颜色更改为按钮

Question

我在引导程序项目中创建了一个按钮，但单击按钮时无法更改文本颜色。在访问状态下，当指针不在按钮中时，文本变为蓝色，我想保持白色。我认为问题在于bootstrap css文件，但我不知道如何解决这个问题

这是小提琴： https://jsfiddle.net/pfrutuoso/Ljr8t8pz/

我的HTML：

<div class="row">
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div class="form-group">
         <label>CPF</label>
         <input type="text" class="form-control">
  <!--   <label class="form-error">Mensagem erro campo</label> -->    
      </div>
   </div>  
   <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <div class="form-group">          
         <button class="btn btn-validarForm" type="button">Validar CPF</button>
      </div>
   </div>    
</div>

和css：

.btn-validarForm{
    font-family: 'Aleo Bold';
    background-color: #8C0000;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    border-radius: 2px;
    border-top: 1px solid #D90000;
    border-bottom: 1px solid #8C0000;
    width:100%;
    font-size:14px;
    height:40px;
    margin-top:23px;
    border:none;        
}

.btn-validarForm:hover,
.btn-validarForm:active,
.btn-validarForm:visited{
    background-color: #B20000;
    color: #fff;
}

Answer 1

Bootstrap还定义了:focus状态样式，在CSS中覆盖它：

.btn-validarForm:hover,
.btn-validarForm:active,
.btn-validarForm:visited,
.btn-validarForm:focus{
    background-color: #B20000;
    color: #fff;
}

JSFiddle

旁注：大多数浏览器都附带开发人员工具中的功能，可以自己跟踪CSS样式。 Chrome（不确定其他浏览器）甚至让您切换伪状态并查看将应用于每个州的样式：