2016-01-11 139 views
0

我有一個在引導項目中創建的按鈕,但當單擊該按鈕時我無法更改文本顏色。在訪問狀態下,當指針不在按鈕中時,文本變爲藍色,我想保持白色。我認爲這個問題是與引導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; 
} 

回答

2

引導程序還定義了:focus狀態樣式,在您的CSS中覆蓋它:

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

JSFiddle

邊注:大多數瀏覽器來與開發工具中的功能追查CSS樣式自己。鉻(不知道其他瀏覽器),甚至讓你切換僞狀態的,並查看將要適用於每個國家的風格:

enter image description here

+0

感謝@George :) –

+0

@PauloFrutuoso這不是個問題聖保羅(: – George

+0

該按鈕周圍的藍色邊框?我試圖把border:0放在按鈕樣式中,但它不起作用:( –