Остановить кнопки группы Bootstrap, чтобы оставаться сфокусированным

Question

Как предотвратить нажатие кнопок после фокусировки после нажатия?

HTML

<div class="container"> 
    <div class="btn-group" role="group" aria-label="..."> 
     <button type="button" class="btn btn-default">Left</button> 
     <button type="button" class="btn btn-default">Middle</button> 
     <button type="button" class="btn btn-default">Right</button> 
    </div> 
</div> 

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 

body { 
    margin: 10px; 
} 

Пожалуйста, смотрите, что я имею в виду в этом Fiddle.

Я знаю, что я мог бы обойти это, применяя стили к якорям <a> вместо кнопок, но я не могу этого сделать, потому что я должен держать следующие оригинальные элементы управления asp.net.

<asp:Button ID="SearchResultsPDF" runat="server" Text="PDF Report" CssClass="btn btn-default" OnClick="PDFReport_Click" /> 

<asp:Button id="SearchResultsCSV" runat="server" Text="CSV Report" CssClass="btn btn-default" onClick="CSVReport_Click"></asp:Button> 

Кроме того, я видел this solution с JQuery, который работает хорошо, но это, кажется, слишком специфичны.

JQuery

$(".btn").mouseup(function(){ 
    $(this).blur(); 
}) 

Я хотел бы знать, если есть CSS единственное решение, и я ценю некоторые указания о том, как сделать это. Благодарю.

Answer 1

Если вы не хотите использовать этот фрагмент jquery, и вы не можете добавить класс. Единственный вариант, о котором я могу думать, - это переопределить стиль для :focus.

.btn-default:focus { 
    background-color: #fff; 
    border-color: #ccc; 
} 

В идеале вы хотели бы использовать свой собственный класс, но это зависит от того, если вы можете добавить класс к asp:Button.

Answer 2

если вы bakcground зеленый цвет в кнопках с помощью CSS

.My_button{ 
    background:#00c189; 
} 

начальной загрузки по умолчанию имеют фокус цвета в кнопках

Как предотвратить кнопки из отвлекаясь после нажатия?

попробовать:

.My_button:focus, My_button:hover{ 
    background:#00c189; 
} 

, если использовать не работают

.My_button:focus, My_button:hover{ 
     background:#00c189 !important; 
    } 

Answer 3

Вы хотите что-то вроде:

<button class="btn btn-primary btn-block" onclick="this.blur();">... 

.blur() метод корректно снимает фокус выделения и Безразлично» t испортил стили Bootstraps.