需要關於將樣式應用於按鈕的幫助

我正在使用引導程序並將自定義主題應用到它。我已經削減角落使用下面的CSS我.btn類的變化：需要關於將樣式應用於按鈕的幫助

.btn-primary { 
 
    border:none; 
 
    background: linear-gradient(135deg, transparent 7px, rgb(0,130,114) 7px) 
 
} 
 
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { 
 
    border:none; 
 
    background: linear-gradient(135deg, transparent 7px, rgb(0,106,91) 7px) 
 
} 
 

 
.btn:focus, 
 
.btn:active:focus, 
 
.btn.active:focus, 
 
.btn.focus, 
 
.btn:active.focus, 
 
.btn.active.focus{ 
 
    outline:none; 
 
    box-shadow:none; 
 
}

<div class="row" style="padding-top:10px"> 
 
    <input type="submit" class="btn btn-primary col-lg-4 col-lg-offset-4"> 
 
</div>

這導致按鈕看起來像這樣：

這正是我想要的，但是當你點擊一個按鈕時，它會回到原始的矩形形狀。我已經嘗試過：active，：enabled和：focus僞類，但矩形仍然出現在這張圖片中。

什麼其他的僞類或元素可能會造成這一點，我怎麼能解決這個問題。

來源

2016-10-03 ObiEff

praveen庫馬爾的解決方案的工作原理，但你必須更新它的目標是特定的類，而不是隻是.btn。我曾經使用過：.btn-primary：focus， .btn-primary：active：focus， .btn-primary.active：focus， .btn-primary.focus， .btn-primary：active， .btn -primary：active：hover， .btn-primary.active。焦點{背景：線性梯度（135deg，透明7px，rgb（0,106,91）7px） } – ObiEff

你的CSS正在被引導的覆蓋。

包括下面這行代碼。這將解決您的問題。

.btn-primary:active:focus { 
    background: linear-gradient(135deg, transparent 7px, rgb(0,106,91) 7px); 
}

乾杯！讓我知道它是否工作。我將您的代碼分叉到我的Codepen帳戶並解決了問題。這裏看一看： http://codepen.io/thekamlesh/pen/ZpXgJY

來源

2016-10-03 11:16:49

只需添加background如你一樣有一個，而不使用!important：

.btn:focus, 
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active, 
.btn:active:hover, 
.btn.active.focus{ 
    outline: none; 
    box-shadow: none; 
    background: linear-gradient(135deg, transparent 7px, rgb(0,106,91) 7px); 
}

工作：http://codepen.io/anon/pen/KgXOwb

來源

2016-10-03 10:20:30

不幸的是我已經試過這些，他們沒有工作。你可以在這裏嘗試一下：http://codepen.io/anon/pen/dpVBAX – ObiEff

@ObiEff嘗試一下......看哪。我有同樣的問題。 –

@ObiEff與背景一起工作。 –

更新

快速修復將!important添加到背景。

！重要的是有效的CSS。您可能會繼承一個項目，其中以前的開發人員使用它，或者您可能需要快速修補 - 因此它可以派上用場。

CSS：「：活動：焦點」事件

.btn-primary { 
    border: none; 
    background: linear-gradient(135deg, transparent 7px, rgb(0, 130, 114) 7px) 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active { 
    outline: none!important; 
    border: none; 
    background: linear-gradient(135deg, transparent 7px, rgb(0, 106, 91) 7px)!important; 
}

來源

2016-10-03 10:20:48

已經嘗試過這些，很不幸沒有工作。試試我添加的codepen。 – ObiEff

將'！important'添加到背景。答案已更新 –

需要關於將樣式應用於按鈕的幫助

回答

相關問題